Watch on YouTubeThe player loads when you press play.
In this video
If you keep a collection of frequently changing items in one React Context, updating one item can make every subscriber render again. An atom family gives each item its own state, so components can subscribe to the item they need without passing it through props. Selectors can calculate new values from that state or fetch data asynchronously with Suspense.
I finish with when I’d use Recoil. Local state works fine when only one component needs it. For server data, a fetching library may be enough. Recoil was useful when several components needed to share independently changing state or calculate values from it.
Read the automatic transcript
YouTube generated these captions and sometimes gets names, punctuation, and code wrong. Check the recording if something reads oddly.
0:00 — recoil is a new state management library for react that was released to the public by a team at facebook in may of 2020. you store pieces of state and recoil using atoms and you can create and export an atom and use it anywhere in your app and you use it just like you'd use a used state now this api is great for a few reasons firstly it's incredibly simple and secondly you don't need to prop drill or set up context providers and finally only the components that use the atom will be updated and optimizing renders to make your app fast is where recoil
0:30 — really shines say we have a bunch of items on the screen if i store them all in one array in react context because that context array will change when i update a single item all the items that subscribe to that context will re-render but with recoil what you can do is put those items in what is called an atom family this creates a separate atom for each item and now only components that subscribe to that specific item's atom will re-render it's almost like you're dynamically creating a separate react context for
1:00 — every single item and this is a great use case for recoil where you have a bunch of items that frequently update but where you want to isolate their re-renders while freely using their state anywhere in your app you can also use recoil to derive new state based on your atoms with selectors simply fetch the values of the atoms that you need in your selector and whenever any of those atoms change that selector is going to rerun and the components that use it will re-render and display the new value selectors can even be asynchronous
1:31 — fetching data from an api for example and you can use this in conjunction with react suspense to build beautiful user experiences but at the end of the day it's about choosing the right tool for the job not using something just for the sake of using it so if you're just dealing with simple state use use state and context and if you read and write data to an api use react query or apollo but if you need to create shareable isolated state for a large number of components or need to implement complicated state derivation logic and
2:01 — you need good performance then recoil is a great option and there's nothing wrong with using all of these solutions in conjunction with each other so that's been it if you'd like to get started with recoil i actually have a free recoil course which you can access at learnrecoil.com and if you found this video useful please give it a like and subscribe if you want to see more your thumbs up helps me out a ton thanks for watching and i'll see you in the next one
2:32 — cheers
Originally published on Jacques Blom.
