7 React Lessons I Wish I Knew Earlier

react seems to come with its own dictionary of terms for you to remember one term I really didn't understand as a beginner was immutable not like muting a remote immutable like you can't change react state by mutating it but that's weird because we mutate data all the time in JavaScript we do a lot of mutations with objects and arrays in particular we mutate objects by adding or removing properties and we mutate arrays by adding or removing array items there's nothing wrong with mutations so why does react try to tell us we can't mutate data if state is immutable it doesn't mean it never changes but you avoid mutations by replacing old data with new data that includes the changes you want it to have to do that you have to follow the basic steps of make a copy of the old data make the changes you want and replace the original with the copy so now you can see why this code won't work we're adding a new user to State and then showing that user but add a new user won't cause our component to reender this is because the push method performs a mutation it doesn't create a copy of the original users array this won't cause an error but nothing's going to happen to fix this you have to update your state immutably by using a method that copies the original array before applying changes you can also use the spread operator to copy the previous items into a new array it's also important to realize a lot of stuff doesn't need to be put in a state Hook when I first started using react I used US state for everything but after building some projects I found that a lot of State shouldn't be put in used state or used reducer you've got lots of types of State in your react App State can come from your server from your URL and their state that lives inside local storage to name a few examples if you've been a react Noob you probably recognize this code we're trying to manage server state by fetching it in use effect and put it in state but you're way better off using a dedicated Library like react query for this as I'll explain later as for URL State you might have tried to put it in local state like this but if you're using nextjs or react router you've already got a dedicated hook like use path name or Ed location that gives you all that data notice that we're using use effect to try to synchronize some state but when you know what doesn't need to live in state you can get rid of use effect entirely so before you reach for a state hook just go through this simple checklist is this a simple value that can be computed each render is there a library in my app that's already holding this state does it need to be rendered and if the answer to all these is no then you can consider putting that data in state I use use effect and use State all the time when first getting started with react and a lot of the time it was for a type of value called a derived value derived values are data that are created from other state or props data when I was new to react hooks I thought I needed to listen for changes in data with use effect like I'm doing here with the date promp but the cool thing about react is most derived values like this formatted date can be used right inside your component with no hooks needed if that data can be derived from another state or prop value just do that during render that component is going to reender anyway when props change this is one of the most common mistakes react devs make even if you're not a beginner recognizing this new type of data will let you remove a lot of unnecessary code another very similar concept that will radically simplify your code is computable values you might be Computing some value within use effect based off of state or props but if that computation doesn't require an actual side effect like a network request you don't need use effect at all like derived values just perform your calculation directly inside your component if it's an expensive calculation you you can always wrap it in used memo to recompute it only when its dependencies change at most you're only using one hook and you have one less State variable to think about now be honest how many times have you written code like this as a react developer I've done it too many times to count but this is a big no no indexes that we get from the map function are not unique using non-unique indexes can come back to bite you because unique values are the only way for react to to tell list items apart but fortunately there's a really easy way to create a unique ID in the browser with the crypto random uuid function but you should never call it like this doing this will create the ID on every render which tells react to destroy and recreate your list items every time the key value changes make sure to generate the ID only when your state is updated if you have an array of objects it's a great pattern to add the ID as a separate property on each element dependencies in react can be annoying dependencies are values that hooks need and these have to be manually written out in an array and what's worse is that these hooks will punish you if you don't add them this cruel and unusual punishment is known as a stale closure it causes weird Behavior such as your UI not displaying the correct data like in this simple timer component that uses set interval to count up from zero every second this looks fine right well by not including count in the dependency array of use effect it won't rerun when count changes the closure inside use effect only captures the value of count in that first render which is zero and because it stays the same the count value is stale and our timer won't count higher than one make sure to always include your dependencies and if things aren't updating like they should in your UI check the dependencies array of hooks like use effect use memo and use callback out of all the these lessons the one I wish I knew years ago was that you're not a bad developer for disliking use effect in fact I try to avoid it as much as possible there's a good reason why react Frameworks have created solutions to keep you from using it use effect is hard because it only specifies when code should run it doesn't tell you why it should run or what it should do there are ways you can improve this slightly such as naming your use effect function but this doesn't fix use effect it just aids your standing but I need use effect to fetch data right if you're still fetching data in use effect do yourself a favor and replace it with tanack query or SWR use effect is probably the worst place to fetch data because of how the hook Works fetching in use effect means you're always requesting data after the component is rendered which leads to a far worse user experience as compared to tools that allow you to render as you fetch here are a few tips to keep use effect out of your code derive your values and render respond to events with event handlers and fetch your component data with react query or on the server but we're just getting started I've put together all the lessons I wish someone taught me about react in a special boot camp made to help you learn react much faster you can check that out and get started at react boot camp. thanks for watching and I'll catch you in the next video

Channel: Code Bootcamp

Views: 57,505

Keywords:

Id: 4AXQgOcL1mo

Length: 7min 30sec (450 seconds)

Published: Mon Apr 22 2024