Colocate state in React

Hi, in this post we are going to see what means “colocate state in React” and we are going to see an example.

Colocate state in React means that we need to keep our “states” as close as where relevant is possible and let’s maintain/keep that practice that if we don’t nee some “state” is a component anymore then let’s just colocate that state where it needs to be.

Example: see how the name state is only needed in <Name /> component and not in other components that are inside the <App />

So in this case we need to keep our “states” as close as where relevant is possible and this indicate that the name state need to be inside the <Name /> component because is the only component that is using that state, this will give us more performance in our application.

Example: So we moved (colocate) the name state inside the <Name /> component and since the state is inside we don’t need to pass the old props as we had.

By Cristina Rojas.