205

I'm having a hard time understanding the 'exhaustive-deps' lint rule.

I already read this post and this post but I could not find an answer.

Here is a simple React component with the lint issue:

const MyCustomComponent = ({onChange}) => {
    const [value, setValue] = useState('');

    useEffect(() => {
        onChange(value);
    }, [value]);

    return (
        <input 
           value={value} 
           type='text' 
           onChange={(event) => setValue(event.target.value)}>
        </input>
    )
}

It requires me to add onChange to the useEffect dependencies array. But in my understanding onChange will never change, so it should not be there.

Usually I manage it like this:

const MyCustomComponent = ({onChange}) => {
    const [value, setValue] = useState('');

    const handleChange = (event) => {
        setValue(event.target.value);
        onChange(event.target.value)
    }

    return (
        <input 
           value={value} 
           type='text'
           onChange={handleChange}>
        </input> ​
    )
}

Why the lint? Any clear explanation about the lint rule for the first example?

Or should I not be using useEffect here? (I'm a noob with hooks)

Improve this question
6
  • 1
    Yeah there's no reason to use an effect here, useEffect is very similar to a combination of componentWillMount, componentDidMount, and when you return a function from useEffect that function is treated as componentWillUnmount. All you're handling at the moment is a simple state change and the useState hook is enough to accomplish that Commented Nov 14, 2019 at 21:47
  • onChange won’t change, but value will. Commented Nov 14, 2019 at 21:48
  • 1
    @MikeAbeln They’re not just changing state, they’re also calling the click handler passed in as a prop. Commented Nov 14, 2019 at 21:49
  • 2
    @DaveNewton Good catch, that escaped me. Still, useEffect doesn't seem appropriate. The prop onChange can easily be moved to the body of the onChange method of the input. Although it should be renamed for clarity. Basically the second example OP gave in the question. Commented Nov 14, 2019 at 22:36
  • 1
    I've opened a feature request github.com/facebook/react/issues/22132 and a codesandbox demonstrating various approaches codesandbox.io/s/fancy-sea-zj5e4, I'd like to get your opinion. I think useEffect could benefit from an additional triggers parameter. Commented Aug 19, 2021 at 8:17

3 Answers 3

Reset to default
174
+50

The reason the linter rule wants onChange to go into the useEffect hook is because it's possible for onChange to change between renders, and the lint rule is intended to prevent that sort of "stale data" reference.

For example:

const MyParentComponent = () => {
    const onChange = (value) => { console.log(value); }

    return <MyCustomComponent onChange={onChange} />
}

Every single render of MyParentComponent will pass a different onChange function to MyCustomComponent.

In your specific case, you probably don't care: you only want to call onChange when the value changes, not when the onChange function changes. However, that's not clear from how you're using useEffect.

The root here is that your useEffect is somewhat unidiomatic.

useEffect is best used for side-effects, but here you're using it as a sort of "subscription" concept, like: "do X when Y changes". That does sort of work functionally, due to the mechanics of the deps array, (though in this case you're also calling onChange on initial render, which is probably unwanted), but it's not the intended purpose.

Calling onChange really isn't a side-effect here, it's just an effect of triggering the onChange event for <input>. So I do think your second version that calls both onChange and setValue together is more idiomatic.

If there were other ways of setting the value (e.g. a clear button), constantly having to remember to call onChange might be tedious, so I might write this as:

const MyCustomComponent = ({onChange}) => {
    const [value, _setValue] = useState('');

    // Always call onChange when we set the new value
    const setValue = (newVal) => {
        onChange(newVal);
        _setValue(newVal);
    }

    return (
        <input value={value} type='text' onChange={e => setValue(e.target.value)}></input>
        <button onClick={() => setValue("")}>Clear</button>
    )
}

But at this point this is hair-splitting.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

That was a great explanation. I was also using useEffect as a subscription artifact. Th only issue here which still confuses me is: What if I ALSO wanted to trigger a first onChange when the component loads? Would then, useEffect make sense with [] dependencies. But then, the lint would complain again.
@zanona would the useCallback trick work? Basically, you don't really want to call onChange, but you more specifically want to call the onChange function that was passed during mount. So you need a way to remember what was this function and call it afterward. I've also tried to add [!!onChange] as dependency, but it doesn't seem to work.
It seems that useCallback will fail as well, but useRef is more appropriate: const initialOnChangeRef = useRef(() => onChange(value)); useEffect(() => { initialOnChangeRef.current(); }, [initialOnChangeRef]);.
That makes more sense than useEffect, but the naming of the functions should be improved. Just call the function handleChange for example and don't use an underscore in _setValue.
Subscription vs side-effects part made this easier to understand. Anyone know what would be the good example of side-effect for useEffect if not getting triggered on some change?
|
93

The main purpose of the exhaustive-deps warning is to prevent the developers from missing dependencies inside their effect and lost some behavior.

Dan abramov – developer on Facebook core – strongly recommend to keep that rule enabled.

For the case of passing functions as dependencies, there is a dedicated chapter in the React FAQ:

https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

tl;dr

If you have to put a function inside your dependencies array:

  • Put the function outside of your component, so you are sure that the reference won't be changed on each render.
  • If you can, call the function outside of your effect, and just use the result as dependency.
  • If the function must be declared in your component scope, you have to memoize the function reference by using the useCallback hook. The reference will be changed only if the dependencies of the callback function change.
Improve this answer

11 Comments

So for instance const initialOnChange = useCallback(onChange, []); useEffect(() => initialOnChange(value), [initialOnChange]) should work for triggering the function onMount? Edit: no it doesn't :/ you need to pass the onChange function as a dependency of the useCallback, so it doesn't work as expected.
Yes @EricBurel, it's a very similar behavior with useEffect. If you are calling an external function from inside useCallback, you will need to declare it in the dependencies array. If you implement the onChange directly without calling another function it would work normally. const onChange = useCallback(() => { // implement here }, []);
I feel like useEffect is mixing 2 concepts: dependencies, that defines the effect callback (so the callback change when a dependency change), and triggers, that actually trigger the effect callback. For many use cases, we would probably need a hook with an API like useEffect(cb, deps, triggers).
Why couldn't we just add the function as a dependency without all of the useCallback overhead?
@IsaacPak completely agree. React is overly complicated in this sense.
|
0

TL;DR

Instead of

function X() {
    let myVar = null;

    const myFunction = () => {
        myVar = 'somevalue';    
        ...
    }

    useEffect(()=> {
            myFunction();
    }, [myStateItem])
}

Use:

function X() {
    const myVar = useRef<string|null>(null);

    const myFunction = useCallback(() => {
        myVar.current = 'somevalue';
        ...
    }, [myVar])

    useEffect(()=> {
            myFunction();
    }, [myStateItem, myFunction])
}

So, as long I understand it right, there is a conection between this functions hooks useEffect, useCallback and useRef in lifecycle;

Here is my research:

https://react.dev/reference/react/useEffect

https://react.dev/reference/react/useCallback

https://react.dev/reference/react/useRef

https://infinitypaul.medium.com/reactjs-useeffect-usecallback-simplified-91e69fb0e7a3

https://medium.com/@guigaoliveira_/conhecendo-o-useref-do-react-9d67e66

https://react.dev/learn/lifecycle-of-reactive-effects

Improve this answer

2 Comments

Please include at least a little explanation of how/why this solves the issue, code-only answers are generally not ideal.
This is confusing to read, is there a reason why the other solutions to this answer don't work?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.