React Responsively, Render Responsibly

React Responsively, Render Responsibly Yoav Niran
React Responsively,
Render Responsibly

A little about me
Yoav Niran
Senior front-end developer @ Cloudinary
The Media Full Stack
Heavy-duty image & video platform
@poeticGeek

The crime scene

The crime scene
App
SelectionView
footer
Header
PhotosGrid
PhotoItem PhotoItem PhotoItem

DEM

FPS Indicator
CPU Chart
Main flame-graph
Frames
Summary

User Timing

The road to performance
572.09 ms 13.18 ms

The road to performance
1. Data go low
2. Time to leave the nest
3. Spread the love props
4. Just Memoize It TM
5. Open a Window

State state = Immutable({
photos: [
{
id: "aaa",
url: "https://..."
width: 2000,
height: 2500,
selected: true,
},
{
id: "bbb",
url: "https://..."
width: 2000,
height: 2500,
selected: false,
},
{
id: "ccc",
url: "https://..."
width: 2000,
height: 2500,
selected: false,
},
...

Clue #1 – You don’t need that data
class PhotosGrid extends Component {
render() {
...
return (
<div className={cx(styles.container, "...")}>
...
{photos.map((p) => (
<PhotoItem
key={p.url}
item={p}/>
))}
</div>
);}}
export default connect(
(state) => ({
fetchStatus: selectFetchStatus(state),
photos: selectPhotos(state),
}),
...
PhotosGrid/PhotosGrid.js

Fix #1 – Data go low
render() {
...
return (
...
{photos.map((p) => (
<PhotoItem
key={p.url}
item={p}/>
))}
</div>
);}}
(state) => ({
photos: selectPhotos(state),
}),
...
render() {
...
return (
<div className={cx(styles.container,
"...")}>
...
{photos.map((id) => (
<PhotoItem
key={id}
id={id}/>
))}
</div>
);}}
(state) => ({
photos: selectPhotoIds(state),
}),
...

Fix #1 - Data go low
const PhotoItem = (props) => {
const {id, filename, width, height, selected,
price} = props.item,
horizontal = props.horizontal;
return (
<article>
...
</article>
);
};
null,
bindActions,
)(RenderCounter(PhotoItem));
const photoItemSelector = (state, props) => {
const photo = state.photos
.find((p) => p.public_id === props.id);
return {
item: takePhotoProps(photo),
};
};
photoItemSelector,
bindActions,
PhotoItem/PhotoItem.js

The Journey
1. Data go low
2. Time to leave the nest
3. Spread the love props
4. Just Memoize It TM
5. Open a Window

Clue #2 – Deep in the nest
export default createReducer(initialState, {
…
[TYPES.SET_SELECTED_PHOTO]: (state, {payload}) => {
const index = getPhotoIndex(state.photos, payload.id);
state = state.setIn(["photos", index, "selected"],
payload.selected);
...
return state;
},
const initialState = Immutable({
...
photos: [],
...
});
store/reducers.js

Fix #2 – Time to leave the nest
export default
createReducer(initialState, {
…
[TYPES.SET_SELECTED_PHOTO]:
(state, {payload}) => {
const index =
getPhotoIndex(state.photos,
payload.id);
state = state.setIn(["photos",
index, "selected"],
payload.selected);
...
return state;
},
...
photos: [],
...
});
[TYPES.SET_SELECTED_PHOTO]: (state, {payload}) => {
const selectedIndex = state.selected.indexOf(payload.id);
if (!~selectedIndex) {
if (payload.selected) {
state = state.set("selected",
state.selected.concat(payload.id));
}
}
else if (!payload.selected) {
state = state.set("selected",
state.selected.filter((s) => s !==
payload.id));
}
...
},
...
photos: [],
selected: [],
});
store/reducers.js

Clue #3 - Pure & Shallow Equal
const getPhotoItemProps = (photo, selected) => {
return {
item: takePhotoProps({...photo, selected}),
};
};
const selected = !!~state.selected.indexOf(props.id);
return getPhotoItemProps(photo, selected);
};
photoItemSelector,
bindActions,

Fix #3 - Spread the love props
return {
item: takePhotoProps({...photo, selected}),
};
};
};
photoItemSelector,
bindActions,
return {
...takePhotoProps({...photo, selected}),
};
};
const selected =
!!~state.selected.indexOf(props.id);
};
photoItemSelector,
bindActions,

Yay?

Memoization
“...memoization or memoisation is an optimization technique used
primarily to speed up computer programs by storing the results of
expensive function calls and returning the cached result when the same
inputs occur again…”
https://en.wikipedia.org/wiki/Memoization
Memoization

Clue #4 - Memoization

Fix #4 – Just memoize it
PhotoItem/PhotoItem.selectors.js
import {createSelector} from "reselect";
import {takePhotoProps} from "../../selectors";
const getPhoto = (state, props) => {
return state.photos
};
const selectIsSelectedById = (state, props) =>
!!~state.selected.indexOf(props.id);
export const getPhotoByIdSelector = () =>
createSelector(
[
getPhoto,
selectIsSelectedById
],
(photo, selected) =>
({...takePhotoProps(photo), selected}),
);
TM

return {
...takePhotoProps({...photo, selected}),
};
};
};
photoItemSelector,
bindActions,
PhotoItem/PhotoItem.js import {getPhotoByIdSelector} from "./PhotoItem.selectors
const PhotoItem = (props) => {
const {id, …, selected, price} = props.item,
horizontal = props.horizontal;
return (
<article>
...
</article>
);
};
() => {
const photoSelector = getPhotoByIdSelector();
return (state, props) => ({
...photoSelector(state, props),
});
},
bindActions,
Fix #4 – Just memoize it TM

Are we there yet?
39.35 ms

Clue #5 – Letting it all out
render() {
...
return (
...
<PhotoItem
key={id}
id={id}/>
))}
</div>
);}}
...

Fix #5 – Open a window
https://bvaughn.github.io/forward-js-2017

https://react-window.now.sh
https://github.com/bvaughn/react-window

render() {
...
return (
<div
className={cx(styles.container, "...")}>
...
<PhotoItem
key={id}
id={id}/>
))}
</div>
);}}
...
PhotosGrid/PhotosGrid.js import {FixedSizeGrid as Grid} from "react-window";
renderItems() {
const {height, width, photos} = this.props;
const colCount = Math.floor(width / 250),
rowCount = photos.length / colCount;
return <Grid
ref={this.gridRef}
columnCount={colCount}
columnWidth={250}
height={height}
rowCount={(rowCount + 1)}
rowHeight={270}
width={width}
onScroll={({scrollTop}) => {
this.gridScrollTop = scrollTop;
}}>
{({columnIndex, rowIndex, style}) =>
<PhotoItem index={getItemIndex(columnIndex,
rowIndex, colCount)}
style={style}/>}
</Grid>
}
…

We made it !
~600 ms ~10 ms

Thank y u
https://github.com/yoavniran/react-performance-demo
@poeticGeek

React Responsively, Render Responsibly

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie React Responsively, Render Responsibly

Ähnlich wie React Responsively, Render Responsibly (19)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

React Responsively, Render Responsibly

Hinweis der Redaktion