❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics and 77+ video tutorials just like this one. Check them out ↓

While I think this is clean. This pattern has made debugging difficult in my experience with large React apps. With props I can trace them up the tree to find where they're being defined/refined/etc. I can see in the code exactly what's available to a component. With contexts it's not as easy to know what a component has access to, I often end up doing runtime logging to see what's in my context. And it's hard to find where something is being set or added. Again in large apps where naming makes things make grepping an issue tok.

In the same file where you create the context, you should use the useContext and export it, so you can have the consumer in there as well. const { addToast } = useToast()

As long as you'll do it for forms reacting to every new entered key, the form will be wa-ay too slow. It'll need much effort to memoize everything to prevent sluggishness. Context is good for infrequently changed data.

That would cause Header, Main and Footer to re-render every time a toast is added

I like what context allows you to do, but wrapping your app in a thousand of them ends up being so 🤮 you start to look at Redux like a god 😂

Long time no posting. Had a good summer vacation, I guess ;)

haha I wish! work has kept me busy Enrique, how are you doing btw?

I do this everywhere it fits. It amazes me that people do not use this pattern more. With the above, you can add 1 line of code to get a hook (vs import React.useContext and the ToastContext). Just use a hook. const {addToast} = useToasts()

How often do you use context vs libraries like query and zustand in the real world apps?

I try to keep the scope of context narrow, otherwise I try to use useState or useQuery as much as possible, haven't been using an outside library for state management for a while now. How about you?