What I have learned after I watch Kent C. Dodds “Advanced React Patterns” course at Frontend Masters.
I fall in love with ReactJS and start learning what I can determine. I begin watching courses, write code, read articles. After that, I decided to start writing what I learned from ReactJS community and the expert people out there.
You can follow me on twitter or check my latest articles on my site yaabed.com. Also, I have my publication at medium blog.yaabed.com.
Before continue reading this article I suggest you read my other article about ReactJS “What I know about ReactJS!” if you are a beginner with ReactJS, or watch Kent C. Dodds beginner course at “https://egghead.io/”.
Let’s get started learning advance ReactJS together.
React programming patterns are used to simplify large React applications and make your team experience easier, this helps your team to build separate components and share logic between them.
After reading this article, you will learn more about modern React patterns like Compound Components, Render Props, Prop Getters, Controller Props, Context API.
Advanced React Patterns
Software Patterns give you the ability to make your code more reusable, general.
Compound Components
A compound component is a way to write elements inside each other, but the primary condition is the inner components doesn’t work without their primary parent.
We can define it also as sharing the same state shared the same parent and shared parent state.
One of my favourite example the tabs component I have built it when I start learning ReactJS.
https://medium.com/media/f039cea09c73e99b79a33ed9cb95d168/href
If you need to share things from the parent container to its children, you can use React.Children provide utilities for dealing with this.props.children.
But, this solution not flexible enough for compound components, because when you change the order for your parts or wrap them inside another element, they will not now have access to the props, because of the map function loop through the first level inside the parent component.
To solve the above problem, we need another way to share state between components without broken if the user for your plugin changes the way he represents the element. We can use Context API to share state between components.
The first element to use Context API is called Provider, and the provider element is the wrapper parent for elements that shared the same state. Then we have the Consumer, that every component inside the provider can use it to get or retrieve the values from the provider.
For the above code, it is not a best practice to set object like this, because every time the render method called it creates a new reference and new object. So people said to put these things inside the component state even the callbacks to avoid re-render every time without need.
Please note that the consumer children are function passed to the consumer and the consumer gives the state to the children.
Compound components are useful when my user for the component, does not need to care about the implementation details. For example, we have state in the parent component check if tabs clicked or not.
I recommend you try it by your self to learn more about how to share things between components, here is a simple project to start work. Try to make it use the Context API instead of React.Children.
Render Props
This technique use props, that’s why it is called render props. You pass a function as a render method that returns ReactJS element and used to render things.
The convention is to name it to render props, but no need to call it like that, some people also use children props as function. But, any properties you pass as a function to render things from another place this called as “Render props”.
I mean by props is that your component inputs. Let me show you an example in the next code.
Look at the end of the component. It is a children component but instead of using it as {this.props.children} we use it as a function and pass to it the arguments we need to make the user for our component return for us the components he needs. Look at the next code how to use this component.
Nice right? Try it by your self and change one of your props to a function and pass for it whatever you need to move. This trick allows you to create sharing things without even use the Context API.
In Kent C. Dodds “Advanced React Patterns” course at Frontend Masters he gives some excellent tips to use when using render props. I recommend also watch “Advanced React Component Patterns” course in egghead.io.
Controlled Components
Controlled is means that you are the one who responsible for changing the state for something by your self. One of the famous example your form inputs, when you pass a value props to your “input” things change.
Now when the user starts typing, you have to pass onChange event for your input to make sure you change it in your state. If you give a value attribute without changing the state, the user input will never reflect the actual text he enters.
That’s why it is called controlled, you control the changes and pass it another time to your input.
Kent C. Dodds also gives an excellent example, like when the user clicks something more than four times, and I need to give him a message and stop him from typing, this can’t happen if I am not the one who writes the component.
For my tabs component, I have changed that the active tab is now taking from the props and I am not the one who controls it. I trigger an event that the user clicks my component and you change the active tabs by your self.
State Reducer
A reducer is a simple function takes an input and return output without any changing on your application state. This type of services called a pure function.
A state reducer used to give your component a function to generate new state depends on the value returned from the reducer. For example on my tabs component user pass a prop called stateReducer as a function, and inside tabs component, we call this function on any change for the state to happen inside the tabs component and assign it as a new state.
This kind of patterns is the same as controlling a component by your props, but this time the component owner send you the old state and the changes and give you the decision to change the inner state.
The final code to trigger your state with the values returns from the state reducer. You can say that this somehow like reducers used in redux.
Higher-Order Components
Higher-Order component is a function that takes a ReactJS component and does some logic on top of it and returns new application component. This pattern is used in most of the library out there for ReactJS. For example, redux use this to merge props from store top level to any component.
Also, I have used this with Material-UI, to pass classes object to your component, or extends the style for their application components. This way of writing your application component with Material-UI called withStyle HOC.
Conclusion
After a while, I discovered that write about what you learn makes your information more strong. Give these pattern a try, they make your components unique, especially if you are one of the people love the open source community. These patterns make your components more reusable, more people to use it.
Oldest comments (0)