├── .gitignore
├── .babelrc
├── src
├── actions.js
├── store.js
├── components
│ ├── App.js
│ ├── List.js
│ └── Item.js
├── containers
│ ├── List.js
│ └── Item.js
├── index.js
├── selectors.js
└── reducer.js
├── index.html
├── README.md
├── webpack.config.js
├── LICENSE
├── package.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .DS_Store
4 | dist
5 | *.swp
6 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["es2015", {"modules": false}],
4 | "stage-2",
5 | "react"
6 | ],
7 | "plugins": [
8 | "react-hot-loader/babel"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/src/actions.js:
--------------------------------------------------------------------------------
1 | // Action Types
2 |
3 | export const SELECT = 'Select'
4 |
5 |
6 | // Action Creators
7 |
8 | export function select(bookId) {
9 | return {
10 | type: SELECT,
11 | bookId
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux'
2 | import reducer from './reducer'
3 |
4 | // devtools
5 | let devtools = f => f
6 | if (window) {
7 | window.Perf = require('react-addons-perf')
8 | devtools = window.devToolsExtension ? window.devToolsExtension() : devtools
9 | }
10 |
11 | export default createStore(reducer, {}, devtools)
12 |
--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react'
2 | import { Provider } from 'react-redux'
3 | import List from '../containers/List'
4 | import store from '../store'
5 |
6 | export default class App extends PureComponent {
7 | render() {
8 | return (
9 |
10 |
11 |
12 | )
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React + Redux Performance
5 |
6 |
7 |
8 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/containers/List.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { getList } from '../selectors'
3 | import List from '../components/List'
4 |
5 | const mapStateToProps = (state, ownProps) => {
6 | return {
7 | items: getList(state)
8 | }
9 | }
10 |
11 | const mapDispatchToProps = (dispatch, ownProps) => {
12 | return {
13 | //..
14 | }
15 | }
16 |
17 | export default connect(mapStateToProps, mapDispatchToProps)(List)
18 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { AppContainer } from 'react-hot-loader'
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | import App from './components/App'
5 |
6 | const rootEl = document.getElementById('root')
7 | const render = Component =>
8 | ReactDOM.render(
9 |
10 |
11 | ,
12 | rootEl
13 | )
14 |
15 | render(App)
16 | if (module.hot) module.hot.accept('./components/App', () => render(App))
17 |
--------------------------------------------------------------------------------
/src/selectors.js:
--------------------------------------------------------------------------------
1 | import { createSelector } from 'reselect'
2 |
3 | // selectors
4 | export const getBooks = (state) => state.books
5 | export const getAuthors = (state) => state.authors
6 | export const getUI = (state) => state.ui
7 |
8 | // compute book list
9 | export const getList = createSelector(
10 | getBooks,
11 | getAuthors,
12 | (books, authors) => Object.keys(books)
13 | .map(bookId => {
14 | const book = books[bookId]
15 | return {
16 | ...book,
17 | author: authors[book.authorId]
18 | }
19 | })
20 | )
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### React + Redux Performance
2 |
3 | This repo is for the Performance Engineering with React + Redux talk at React.js Meetup - Buenos Aires.
4 |
5 | The goal is to learn to detect performance bottlenecks in an application, and fix them using a set of techniques:
6 |
7 | - Minimizing memory footprint by optimizing the render methods
8 |
9 | - Memoizing selectors
10 |
11 | - Using pure components
12 |
13 | - Connecting list items
14 |
15 | - Virtualizing React
16 |
17 | Each step has been tagged, so you can fast-forward to it replacing TAG_NAME with the tag of the step:
18 |
19 | ```
20 | git clone --branch TAG_NAME https://github.com/cazala/react-redux-perf.git --depth=1
21 | ```
22 |
--------------------------------------------------------------------------------
/src/containers/Item.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { select } from '../actions'
3 | import { getList, getUI } from '../selectors'
4 | import Item from '../components/Item'
5 |
6 | const mapStateToProps = (state, ownProps) => {
7 | const book = getList(state).find(book => book.id === ownProps.id)
8 | const ui = getUI(state)
9 | return {
10 | name: book.name,
11 | author: book.author,
12 | selected: ui.selected === ownProps.id
13 | }
14 | }
15 |
16 | const mapDispatchToProps = (dispatch, ownProps) => {
17 | return {
18 | onSelect: (id) => dispatch(select(id))
19 | }
20 | }
21 |
22 | export default connect(mapStateToProps, mapDispatchToProps)(Item)
23 |
--------------------------------------------------------------------------------
/src/components/List.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent, PropTypes } from 'react'
2 | import Item from '../containers/Item'
3 | import Infinite from 'react-infinite'
4 |
5 | const propTypes = {
6 | items: PropTypes.array
7 | }
8 |
9 | class List extends PureComponent {
10 | render() {
11 | const { items, onSelect } = this.props
12 | return (
13 |
14 |
Books
15 |
16 |
17 | {items.map(item =>
18 |
25 |