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

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

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.

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

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.

#react #javascript #web-development #developer