Five Ways to Advanced React Patterns

Yazan Aabed
Jul 3, 2018 · 8 min read

What I have learned after I watch Kent C. Dodds “Advanced React Patterns” course at Frontend Masters.

Photo by rawpixel.com from Pexels

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 athttps://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

Compound Components

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.

Compound components example.

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.

Share props from parent component.

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.

How to create context element with React.
This is the parent element for every consumer needs to use the parent state.

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.

This is how to use the consumer and retrieve parent state.

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

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

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 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.

State reducer example.
Pass state reducer to component.

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

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.

Sidebar example for show user name or login button

Conclusion


I am writing at blog.yaabed.com. If you enjoyed this article please make sure to share it with other people. And don’t forget to hit the follow button for more articles like this, also follow me on twitter.

Hi my name is Yazan Aabed. Grown up in Palestine. My major was in computer science. I am a Frontend Engineer & JavaScript lover 💫👨‍💻. Mostly working with Frontend frameworks like (AngularJs, ReactJS). You can call me #Geek 🤓. Also, I Like to share my knowledge with other people and learn from them 💥🔥🌪. You can find me on GitHub, Medium, Twitter.


My latest tweets

blog.yaabed.com

Javascript is all that we need. Blogs and articles on Angular, React, JavaScript, front-end development and math. Hi my name is Yazan Aabed. I Like to share my knowledge with other people and learn from them 💥🔥🌪.

Yazan Aabed

Written by

A fullstack engineer and javascript lover, you can call me #Geek 🤓💥🔥🌪, like to write, learn, read, music, programming, challenges. - https://www.yaabed.com

blog.yaabed.com

Javascript is all that we need. Blogs and articles on Angular, React, JavaScript, front-end development and math. Hi my name is Yazan Aabed. I Like to share my knowledge with other people and learn from them 💥🔥🌪.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade