Advanced React Context Typescript | useContext and createContext

Time to talk about context again! This time it's more advanced and I'll talk about using ReactJS Context with Typescript. I'll also show how to create a custom hook and a component to use the context. Finally I'll show how to memoize the context.

00:42 - Part 1 - Create a context
11:21 - Part 2 - Customize stuff
21:49 - Part 3 - Memoizing

Support me by subscribing to this channel ❤️

Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀

—

Find me somewhere below:

[aleksandarpanov]

Wow! You nailed it. Great tutorial. I liked it. Saved it. Subscribed to the channel.

[deathdefier]

Clean to the point explanation, thank you for helping me visualise the data changes so clearly, great tutorial!

[fatinfuyad]

Very important video. I was looking for context with tsx

[elsplatto]

And with 30 minutes of my time I now have a context wrapped around my tricky filter UI and wiped out half the JS in that component. Many thanks.

[biLLie_wiLLie]

19:05 with cmd + D it's faster to achieve) Thank you for lesson

[PattySpicy]

Amazing example ! Thanks very much ! I have implement this to my context and it work nicely!

[aidarousjibril]

Hej Thomas, lärorik video, har du någon video som du går genom lite djupt på hur man skickar State mellan olika component på en nested state data i ReactJS och TypeScript?

[kemcadams]

how do you mock this hook for jest testing?

[avneet]

Great video but a lot of this is confusing to me.

In the first case where there's no useEffect I couldn't understand why the useMemo in the context did the trick. After all, if the button is pressed then a new object should be generated despite the useMemo because the state has changed and the useMemo dependency array has this element.

Yet, the Laser component didn't re-render. Any idea about the reason?