blog/hooks-dependencies-and-stale-closures

[giscus[bot]]

blog/hooks-dependencies-and-stale-closures

Let's demystify what stale closures are in combination with react hooks with the help of the analogy of taking a photo ...

https://tkdodo.eu/blog/hooks-dependencies-and-stale-closures

[Moshyfawn]

I'm a very law-abiding developer in React world. I pretty much always follow the React eslint rules and hints. But it gets me staggered for a couple of seconds when including a callback in, say, a useEffect deps in the same component's body results in eslint suggesting to wrap the callback in a useCallback hook, otherwise it may result in continously running the effect.

I do eventually give in and do the thing. It just makes me wonder if I go about it the wrong way, as it feels like a premature optimization at times (maybe it's just all those "you don't need constant useMemo / useCallback" articles speaking lol)

[TkDodo]

if you create an inline function in a component and then add that function to a dependency array, yes, that would result in the effect running on every render, because the function is a new identity every time. React offers basically two solutions:

1. move the function declaration into the effect to avoid the problem
2. wrap the function in useCallback

if you do it for 2), its not a premature optimization, as you are not doing it for perf gains, but for referential stability.

There is also a third way, which I have been using quite a lot lately. This is what I hinted at the end of the article - I'll write about it soon :)
You can also google for the latest ref pattern :)

[prowner]

Very nice explanation. The cause of many hard to locate bugs!

[TkDodo]

Thank you Robin

[chiptus]

I still don't understand how do I use useEffect when I want it to run only once at mount time. if it has dependencies, they it will run every time they, no?

[prowner]

If you want it to only run on mount, but it has dependencies, you need to re-run it when the dependencies change. Otherwise your setup is wrong.

Let's say you have a component that has an endpoint as prop, and on mount, you want to call that endpoint. The endpoint is your dependency, if it changes you need to re-run your effect. Otherwise it wouldn't make sense to pass it as a dynamic prop.

In essence, there is nothing like "run effect only on mount", it's more like a side-effect of your useEffect not having dependencies, that it will only execute on mount.

[TkDodo]

I can recommend the article "thinking in hooks": https://wattenberger.com/blog/react-hooks

essentially, we have to move away from thinking in "on mount" and "on unmount" more towards "I want to sync this piece of state with something outside of react"

if it has dependencies, they it will run every time they, no?

they will run every time when the dependency changes. To pick up @robinalaerts1's example: a string url that you use inside an effect to make a request can relatively easily be included in your effects dependency array. If the url never changes, the effect will only run once. But it will re-run if the url changes (e.g. if it comes from a prop), which is pretty much what we would want! Otherwise, we would display data that doesn't correspond to our props anymore :)

[masylum]

The big advantage though is that they can be statically analyzed - and that's exactly what the react-hooks/exhaustive-deps
I think that's actually an overstatement. People blindly following this linter will add non-scalar values as dependencies such as arrays or dates. I've wrote about it here: https://labs.factorialhr.com/posts/hooks-considered-harmful

[prowner]

depends, if your dependencies are immutable, there is no problem.

[TkDodo]

It's a good read @masylum , thanks for sharing 👍

Identity is a problem, but rather one of the language itself rather than the one of hooks. I'm looking forward to the Records and Tuples proposal to make that better. It's gonna be huge for react - have a read in this Article by Sebastien Lorber.

While there are definitely valid examples for where including referentially unstable values in your hooks dependencies are troublesome, the ones from your article are not among them. Maybe the lint rule has gotten better in the meantime, but for me, it complains here:

function User({ user }) {
  useEffect(() => {
    console.log(`hello ${user.name}`)
  }, [user]) // eslint barked, so we added this dependency

  return <span>{user.name}</span>
}

that user.userName should be added to the dependency, not the whole user.

ESLint: React Hook React.useEffect has a missing dependency: 'user.name'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)

same for the fetch example.

Especially including functions would be a good example, and like I've hinted at the end of the blog, there are ways to use functions / objects safely in effects without needing to omit them from the dependencies and thus introducing stale closures. I hope I can write about it soon. Stay tuned 📻

[nicholasnkw]

Hi, I think when you say snap a picture, it can be confusing, technically it captures the reference of that variable, not just the value
Like for this example, the count variable "snap" is 0 when getCounter gets created, but when count gets updated, it does get reflected.

function fn(){
    let count = 0
    const getCounter = () => {
        return count
    }
    const addCounter = () => {
        count += 1
    }
    return [getCounter, addCounter]
}

For react, when the component re-render, the variable reference changes, that's why it close on the last value for the memoized function
Just wanted to clarify that point.
Thanks for the article though.