The best thing you can do for your success is to learn React's mental model and truly understand it

Sure it's hard, but it's so worth it

I am actually going to release a really deep course on "React fundamentals" on Cosden Code to help

Join the waitlist cosdencode.ai

4. Re-renders are good

So many developers try to avoid re-renders by using useMemo and useCallback, only to achieve nothing

Re-renders are good. It means you're seeing the updated data. This is what you want

If you have slow renders, then fix those in isolation as they come up

3. Prop drilling isn't as bad as you think

Recently I saw a developer create a whole Zustand store with a bunch of state and functions, all to avoid passing one prop 3 layers deep

Prop drilling is not that bad. 3 layers is fine, especially if those components are only used once

2. Refs are not reactive

Refs are so powerful and underrated in React. And they are not just for DOM elements

Refs allow you to store any value and read it without causing or waiting for a render

When you update a ref, unlike useState, the component doesn't re-render

1. UseEffect dependency arrays

Here's the rule: everything you use inside a useEffect, HAS TO go in the dependency array

If you don't, you WILL forget something and you WILL have bugs

E.g. having an onVisit(url) function but not calling it when url changes

Join the waitlist cosdencode.ai

This is a weird pattern that is only really useful when you want to compare the previous value of something with its current value

Like we're doing in the example above

And this is actually officially recommended in the React docs

Weird huh?

When you do that React is going to continue the body of the component until the return statement after which it will abandon the render

This means that the JSX is not going to get updated in that render

React is going to start again on a new render from the top

In the example above, the prevCount state variable gets initialized with the count

Then, we have an if statement directly in the body of the component as its rendering, comparing prevCount and count

If they're not equal, we set prevCount to the count to sync them

So, even though we've only provided the url in the dependency array, every time that onVisit gets called, it will see the latest numberOfItems

Effect events are similar to refs. They let you see the latest values

Now, we never have to worry about dependency arrays ever again

That's where the useEffectEvent hook comes into play

We can create an effect event called onVisit and call that in the body of useEffect instead

Effect events do not need to be provided in dependency arrays, but they still see the latest values

The problem is, if we do that, then we're violating the rules of hooks

The rules of hooks say that everything used inside of the body of useEffect has to go in the dependency array

So if we can't do that, what's the solution?

Here we're tracking a page view event based on the url and the numberOfItems

With this code, when the numberOfItems changes, the event will fire even if the URL hasn't changed

This is probably not what we want

To fix it, we need to remove numberOfItems from the deps array

This will be part of Cosden Code, my upcoming learning platform

There will be many courses on it, on React and frontend

I'm beyond excited! You can join the waitlist here: cosdencode.ai