Slides for meetup group

1. React Patterns
Naimish Verma - 7th November, 2020
https://naimishverma.in

2. Topics to be covered-
1. React’s Compositional Nature
2. Higher Order Components
3. Render Props
4. Presentational and Container components
5. Child Aware components
6. Child Enhancing components

3. React’s Compositional Nature
One of the biggest benefits of react is it’s composability.
React has a powerful composition model, and we recommend using
composition instead of inheritance to reuse code between components.
- React official documentation

4. Consider a example -
<App/>
|
<Header/>
|
<Navigation/>
The trivial approach for combining these components is to reference them
where we need them

5. This approach introduces a couple of
problems, what if we need the same
header but without navigation. We can’t
achieve that because both of them are
tightly coupled with each other.
Also it’s hard to test there type of
components.

6. React’s Children API
We can now test this
component because we may
render Header with an empty
div. This will isolate the
component and will let us
focus on one piece of
application.

7. Higher Order Components(HOC)
It’s just a function which accepts an original component and returns an
enhanced component.

8. The actual creation of the higher order component should happen at
component definition level. Or in other words it’s a bad practise to do inside
another react component because it maybe slow and lead to performance
issues.
- Dan Abramov

9. It is slow and blows away the DOM and state completely in all components below OriginalComponent
because enhanceComponent(OriginalComponent) gives you a different type every time you render().
We just do the this once so render() always returns same type of EnhanceComponent.
Problem -
Solution -

10. Render Props
The term “render prop” refers to a technique for sharing code
between React components using a prop whose value is a
function.

11. Render props provide flexibility and
help us to reuse the code. In fact,
any prop that is a function that a
component uses to know what to
render is technically a “render
prop”.

12. Presentational and Container Components
The main question is where should I put all my data, or how to
communicate changes or how to manage state?
The best approach is “DATA DOWN AND ACTIONS UP”. This is what
presentational and container components all about.

13. Example:

14. Problems in this approach
1. Firstly, the clock component mutates the state itself. If any other part
of application depends on this data, it will be difficult to share it.
2. _formatTime is actually doing two things - it extracts the needed
information from date object and makes sure that values are always
presented in two digits.

15. Solution:
Extracting the component into presentation and container component.
Container knows about data, its shape and where it comes from. They
know about how the things work or the so called business logic. The
presentational components on the other hand deals only with the UI part
irrespective from the business logic.

16. The concept of container
and presentation is not
new at all, but it fits nicely
with React. It makes our
application better
structured, easy to
manage and scalable.

17. Child Enhancing Components
These are the type of components which takes their children component
and adds some extra functionality on top of it.
Let’s have a look by an example.

18. Clone and return a new React element using
element as the starting point. The resulting element
will have the original element’s props with the new
props merged in shallowly. New children will replace
existing children. key and ref from the original
element will be preserved.
Clone element API

19. Child Aware Component
Victory Charts

20. Interpretation
It seems like that these are bidirectional components, where child
components are communicating back to the parent component.
Now it conflicts with our earlier approach of “Data Down and Actions
Up”.

21. Interrogating it’s children components
It turns out that the VictoryChart Component is interrogating with its child
component.
Each child component exposes its data via props and selectors and its passed
through the parent component. So, the parent component can interpret that data
and can act accordingly.
This is something called as Child Aware Component.

22. References
1. React In Patterns - Krasimir Tsonev
2. Reactjs.org
3. Robert Herbst - Advanced Patterns| ReactNext 2018
Thank
you.