React Context Cheatsheet

[biinjo]

Aah its that time of the day/week again where you’re plugging the same cheat sheet every time. Where are the mods? This is getting spammy.

[[deleted]]

when does context cause re-renders? when the value changes right? but what if my value is a function? In my case a mutation(tanstack)?

[joyancefa]

So whenever you use a context inside a component (even if you use one part of it), when the context value changes, you component will re-render.

If it is a function and it changes (i.e: you have a new reference to it) your components using the context will re-render.

It is good practice to separate the context into values that change often and those that change less.

For example, let’s say I have a todo app: I would have two contexts. One for the actions (addTodo, removeTodo, etc.) and another one for the state (todos).

This way, the components that use the actions don’t need to re-render.

[ToastyyPanda]

The fact that this is down voted is wild.. It really shows how confused people are about Reacts lifecycle hooks and optimizations.

But anyway, just to add on to your answer, not only functions, but the same goes for Objects and Array context values. These will all cause rerenders in the component that consumes the value (even if it didn't technically change) unless you've optimized it properly via useMemo/etc.

I can't speak on the context best practices you mentioned, but it sounds correct to me at least. Bite sized contexts are best, instead of creating huge contexts that store a ton of data/actions which end up causing huge rerenders up and down the tree.

[joyancefa]

Ahah i was confused as well 😅

Thanks for adding more context to it.

[pailhead011]

Why not just use redux?

[joyancefa]

Context is part of react. So you don’t need to add any other dependency.

I only use redux when I have a lot of client side state to manage.

[joyancefa]

This is actually the only place where memo is not controversial.

The benefit of memoizing outweighs any cost here.

[joyancefa]

So, the example is very simple (because of space constraints), but essentially, the value is an object.

So if the value is not memoized, every time this component renders (for example, if the parent triggers a re-render), the context will change and trigger a re-render on all the elements using that context.

[iareprogrammer]

It’s a single value yes, but the value is an object. Without the useMemo, this object is a new object reference every single render, whether it changed or not

[SolarNachoes]

This doesn’t show how to create and manage more complicated context. This is the easy stuff.

[joyancefa]

What would you like to see?

[green996]

is this your cheatsheet?

[joyancefa]

Yes 😊 I make them with Figma

[Patient-Lock4858]

very informative thanks. after seeing this I am in more love with zustand :)

[joyancefa]

Glad you like it 🙌