React @ Scale 

@dcousineau 

No content

No content

No content

Scalability is the capability of a system, network, or process to handle a growing amount of work, or its potential to be enlarged to accommodate that growth. – Wikipedia 

Don’t avoid local state 

onClick(e) { this.setState({val: e.target.value.toUpperCase()}); } // ...or... const Component = () => { const [val, setVal] = useState(''); return ( setVal(e.target.value.toUpperCase())} /> ); } 

onClick() { this.setState((prevState, currentProps) => { return { show: !prevState.show, }; }); } // ...or... const Component = () => { const [show, setShow] = useState(false); return ( !prevShow)}>Hello ); } 

onClick(e) { this.setState({value: e.target.value}); this.props.onChange(this.state.value); } 

onClick(e) { this.setState({value: e.target.value}, () => { this.props.onChange(this.state.value); }); } // ... or ... const Component = ({ onChange }) => { const [val, setVal] = useState(''); useEffect(() => { onChange(val); }, [val]); return ( setVal(e.target.value)} /> ); } 

Hoist local state early and often 

this.state.checked = true; 

this.props.checked = true; this.props.checked = true; this.props.checked = true; this.state.checked = true; 

this.props.checked = true; this.props.checked = true; this.props.checked = true; this.props.checked = true; checked: true 

Use hooks (on new components) 

https://reactjs.org/docs/hooks-intro.html Don’t rewrite everything in hooks 

useState useEffect useRef useContext this.setState(…) componentDidUpdate() {…} React.createRef() contextTypes: {…} https://reactjs.org/docs/hooks-reference.html 

eslint-plugin-react-hooks https://www.npmjs.com/package/eslint-plugin-react-hooks 

Use Suspense (and React.lazy) 

const lazyComponent = (lazyImport, fallback = null) => { const LazyComponent = React.lazy(lazyImport); return props => ( ); }; const AsyncComponent = lazyComponent(() => import('./async.js')); const Component = ({ show }) => { return ( ); } 

Don’t avoid Redux (hooks are not a replacement) 

Be judicious about what you store in Redux 

• API Responses (“shared cache”) • Data required at deeply nested levels • Truly global layout state (menu open, etc) 

Use “selector” functions to read Redux store 

function selectUserById(store, userId) { return store.users.data[userId]; } function selectCurrentUserId(store) { return store.users.currentUserId; } 

const mapStateToProps = (store) => { const currentUserId = selectCurrentUserId(store); return { user: selectUserById(store, currentUserId), }; }; export default connect(mapStateToProps)(YourComponent); 

https://github.com/reduxjs/reselect 

Normalize API responses based on Domain model 

https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5 

{ data: { ...entities }, namespaces: [`${ns}`], [ns]: { ids: ['id0', ..., 'idN'], ...meta } } 

{ data: { 'a': userA, 'b': userB, 'c': userC, 'd': userD }, namespaces: ['browseUsers', 'allManagers'], browseUsers: { ids: ['a', 'b', 'c'], isFetching: false, page: 1, totalPages: 10, next: '/users?page=2', last: '/users?page=10' }, allManagers: { ids: ['d', 'a'], isFetching: false } } 

function selectUserById(store, userId) { return store.users.data[userId]; } function selectUsersByNamespace(store, ns) { return store.users[ns].ids.map(userId => selectUserById(store, userId)); } 

function fetchUsers({query}, ns) { return { type: FETCH_USERS, query, ns }; } function fetchManagers() { return fetchUsers({query: {isManager: true}}, 'allManagers'); } function receiveEntities(entities, ns) { return { type: RECEIVE_ENTITIES, entities, ns }; } 

function reducer(state = defaultState, action) { switch(action.type) { case FETCH_USERS: return { ...state, namespaces: uniq([...state.namespaces, action.ns]), [action.ns]: { ...state[action.ns], isFetching: true, query: action.query } }; case RECEIVE_ENTITIES: return { ...state, data: { ...state.data, ...action.entities.users.data }, namespaces: uniq([...state.namespaces, action.ns]), [action.ns]: { ...state[action.ns], isFetching: false, ids: action.entities.users.ids } }; } } 

function reducer(state = defaultState, action) { switch(action.type) { case FETCH_USERS: return { ...state, namespaces: uniq([...state.namespaces, action.ns]), [action.ns]: { ...state[action.ns], isFetching: true, query: action.query } }; case RECEIVE_ENTITIES: return { ...state, data: { ...state.data, ...action.entities.users.data }, namespaces: uniq([...state.namespaces, action.ns]), [action.ns]: { ...state[action.ns], isFetching: false, ids: action.entities.users.ids } }; } } 

function selectUsersAreFetching(store, ns) { return !!store.users[ns].isFetching; } function selectManagersAreFetching(store) { return selectUsersAreFetching(store, 'allManagers'); } 

function reducer(state = defaultState, action) { switch(action.type) { case UPDATE_USER: return { ...state, draftsById: { ...state.draftsById, [action.user.id]: action.user } }; case RECEIVE_ENTITIES: return { ...state, data: { ...state.data, ...action.entities.users.data }, draftsById: { ...omit(state.draftsById, keys(action.entities.users.data)) }, namespaces: uniq([...state.namespaces, action.ns]), [action.ns]: { ...state[action.ns], isFetching: false, ids: action.entities.users.ids } }; } } 

function reducer(state = defaultState, action) { switch(action.type) { case UPDATE_USER: return { ...state, draftsById: { ...state.draftsById, [action.user.id]: action.user } }; case RECEIVE_ENTITIES: return { ...state, data: { ...state.data, ...action.entities.users.data }, draftsById: { ...omit(state.draftsById, keys(action.entities.users.data)) }, namespaces: uniq([...state.namespaces, action.ns]), [action.ns]: { ...state[action.ns], isFetching: false, ids: action.entities.users.ids } }; } } 

function selectUserById(store, userId) { return store.users.draftsById[userId] || store.users.data[userId]; } 

function reducer(state = defaultState, action) { switch(action.type) { case UNDO_UPDATE_USER: return { ...state, draftsById: { ...omit(state.draftsById, action.user.id), } }; } } 

Use Webpack! 

Use Webpack! Have a discrete (FE) asset build pipeline 

const path = require('path'); module.exports = { mode: 'development', entry: './index.js', output: { path: path.resolve('./dist'), filename: 'index.bundle.js' } }; webpack.config.js 

import('./async.js').then(() => /* Finished loading async module! */); https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports index.js 

Hash: 27b16bd3779b96e0ae26 Version: webpack 4.30.0 Time: 51ms Built at: 05/01/2019 6:31:57 PM Asset Size Chunks Chunk Names 0.index.bundle.js 325 bytes 0 [emitted] index.bundle.js 8.21 KiB main [emitted] main Entrypoint main = index.bundle.js [./async.js] 33 bytes {0} [built] [./index.js] 36 bytes {main} [built] 

entry output module optimization plugins 

Use webpack-dev-server 

const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', entry: { index: [ require.resolve('webpack-dev-server/client') + '?http://localhost:3002/', require.resolve('webpack/hot/dev-server'), './index.js', ] }, output: { path: path.resolve('./dist'), publicPath: '/dist/', filename: 'index.bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin(), ] }; webpack.config.js 

> webpack-dev-server --disable-host-check --progress --color --port 3002 --inline=false ℹ ｢wds｣: Project is running at http://localhost:3002/webpack-dev-server/ ℹ ｢wds｣: webpack output is served from /dist/ ℹ ｢wdm｣: Hash: 39da216c3734d73fa85c Version: webpack 4.30.0 Time: 278ms Built at: 05/01/2019 6:37:44 PM Asset Size Chunks Chunk Names 0.index.bundle.js 325 bytes 0 [emitted] index.bundle.js 382 KiB index [emitted] index Entrypoint index = index.bundle.js [0] multi (webpack)-dev-server/client?http://localhost:3002/ (webpack)/hot/dev-server.js ./index.js 52 bytes {index} [built] [./async.js] 33 bytes {0} [built] [./index.js] 36 bytes {index} [built] [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {index} [built] [./node_modules/querystring-es3/index.js] 127 bytes {index} [built] [./node_modules/url/url.js] 22.8 KiB {index} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost:3002/] (webpack)-dev-server/client? http://localhost:3002/ 8.26 KiB {index} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {index} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {index} [built] 

No content

const express = require('express'); const app = express(); //... app.use( /(^\/dist|^\/dist\/.*\.hot-update\.js(on)?|__webpack_hmr)/i, streamingHttpProxy('http://localhost:3002', { forwardPath: req =># req.originalUrl }) ); Proxy your dev server Or use https://github.com/jantimon/html-webpack-plugin 

Optimize fresh starts for new developers 

How fast can you deploy? 

No content

Pre: Clear homebrew & npm caches 1. Clone repo 2. Run npm install 3. Run production build 1. Compile & Minify CSS 2. Compile, Minify, & Gzip via Webpack 138.42s ~2 min 

Use feature flags 

}> 

No content

Team 1 Team 2 Merge Feature A Merge Feature B Deploy Deploy OMG ROLLBACK DEPLOY!!! Merge Feature C Merge Bugfix for A Deploy Deploy BLOCKED!!! Deploy 

Team 1 Team 2 Merge Feature A Merge Feature B Deploy Deploy Rollout Flag A Rollout Flag B OMG ROLLBACK FLAG A!!! Merge Feature C Deploy Merge Bugfix for A Deploy Rollout Flag A Rollout Flag C 

Can you optimize your directory structure around team responsibilities? If teams are organized by “product domain”, Can you organize code around product domain? 

Final Thoughts 

If you’re struggling, they’re struggling. Focus on developer ergonomics first, performance later. 

You will not get it perfect the first time. Optimize your code for easier refactoring. 

Questions?