A presentation about the different React components, how they differ, the pros, the cons and performance impacts.

1. @eyaleizenberg
Eyal Eizenberg - Engineering Team Leader
eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg
React Component Wars

2. @eyaleizenberg
Wix Engineering
Locations
Ukraine Israel Lithuania
VilniusKiev
Dnipro
Tel-Aviv
Be’er Sheva
Haifa

3. @eyaleizenberg
ABOUT ME ABOUT WIX
HAIFA

4. @eyaleizenberg
How React Works
Component Types
How to Optimize Performance
AGENDA

5. @eyaleizenberg
React is a
JavaScript library
for building
user interfaces. Hello| Hello

6. @eyaleizenberg
Hello| Hello
root
app
textbox texttable
TR
TD

7. @eyaleizenberg
A component
re renders
when…
1. Its parent is
updated.
2. Its state / props
were changed.

8. @eyaleizenberg
Re render
#1
Virtual DOM
#2
DOM
Change
in parent
or state /
props
Things that trigger a component’s

9. @eyaleizenberg
The Cost of Re render
#1
Virtual DOM
#2
DOM
is performance.
Change
in parent
or state /
props

10. @eyaleizenberg
✔ How React Works
Component Types
How to Optimize Performance
NEXT

11. @eyaleizenberg
const Welcome = ({ name }) => (
<h1>Hello, {name}</h1>
);
Function
Component
Gets props
Returns a React element

12. @eyaleizenberg

13. @eyaleizenberg
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
+ State and lifecycle methods
+ Can be extended
Class
Component

14. @eyaleizenberg
class Welcome extends React.PureComponent {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Pure
Component
State and lifecycle methods
Can be extended
+ shouldComponentUpdate
is taken care of...

15. @eyaleizenberg
What are they good for?

16. @eyaleizenberg
Function
Components
▪ Straightforward
▪ D.R.Y
▪ Easy to test.

17. @eyaleizenberg
Function
Components
Class
Components
▪ Straightforward
▪ D.R.Y
▪ Easy to test.
▪ Can be complex
▪ Flexible & customizable
▪ Can be extended

18. @eyaleizenberg
Function
Components
Class
Components
Pure
Components
▪ Straightforward
▪ D.R.Y
▪ Easy to test.
▪ Can be complex
▪ Flexible & customizable
▪ Can be extended
▪ Can be complex
▪ Flexible & customizable
▪ Can be extended
▪ Perform better

19. @eyaleizenberg
ALL FUNCTION vs.
ALL CLASS COMPONENTS
FIGHT!

20. @eyaleizenberg
ALL CLASS/Function vs.
ALL Pure Components
FIGHT!

21. @eyaleizenberg
Why Pure Components Won

22. @eyaleizenberg
is performance.
Change
in parent
or state /
props
+ shouldComponentUpdate
is taken care of...
✘ don’t change.
? do I need to change?

23. @eyaleizenberg
The Cost of
#1
Virtual DOM
#2
DOM
is performance.
Change
in parent
or state /
props
+ shouldComponentUpdate
is taken care of...

24. @eyaleizenberg
✔ How React Works
✔ Component Types
How to Optimize Performance
NEXT

25. @eyaleizenberg
Optimization
#1
root
textbox text
TD
text comptable
TR
When possible,
separate unrelated
components in the
DOM.

26. @eyaleizenberg
“Always” prefer Pure Components.
Optimization
#2

27. @eyaleizenberg
Optimization
#3
#1
Virtual DOM
#2
DOM
Make Function and Class Components
act like Pure Components.

28. @eyaleizenberg
Optimization
#3
Render Class Components only once
(beats even Pure Components’ performance)
shouldComponentUpdate = false
This needs to be a very
conscious decision since
everything under this
component will never
re-render as well.

29. @eyaleizenberg
Optimization
#3
How to make Function Components
act like Pure Components
React.memo()
▪ Similar to PureComponent - it will help us control when our components re-render.
▪ Component will only re-render if its props have changed.
▪ Only from React 16.6 and up
▪ Gotcha - you might forget to wrap new components

30. @eyaleizenberg
Optimization
#3
How to make Function Components
act like Pure Class Components
React Hooks
▪ Add “state” to function components.
▪ Add a componentDidMount/Update ‘lifecycle event’ with useEffect
▪ Only from React 16.8 and up

31. @eyaleizenberg
export default connect(
mapState,
mapDispatch
)(MyComponent);
React Redux
React Redux gives us the
connect H.O.C

32. @eyaleizenberg
export default connect(
mapState,
mapDispatch,
mergeProps,
options
)(MyComponent);
React Redux
The connect method has
2 more opts

33. @eyaleizenberg
{
context?: Object,
pure?: boolean,
areStatesEqual?: Function,
areOwnPropsEqual?: Function,
areStatePropsEqual?: Function,
areMergedPropsEqual?: Function,
forwardRef?: boolean,
}
React Redux
Redux React is actually a
“Pure H.O.C”!

34. @eyaleizenberg
Thank You
eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg

35. @eyaleizenberg
Q&A
eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg