Home / Questions / 462323
Accepted
Juan Cabello
Asked: 2022-06-16 19:10:03 +0800 CST 2022-06-16 19:10:03 +0800 CST

Warning State inside useEffect

  • 772

I have this warning inside this useEffect:

useEffect(() => {
    setProyecto({
        ...proyecto,
        urlFirebase: urlImg
    })
}, [urlImg]);

React Hook useEffect has a missing dependency: 'project'. Either include it or remove the dependency array. You can also do a functional update 'setProject(p => ...)' if you only need 'project' in the 'setProject' call react-hooks/exhaustive-deps

I tried to do what appears in the warning but it does not replace the value I want, it removes everything from the state that is an object and leaves it as a String with the url. This is the useEffect I made

useEffect(() => {
    setProyecto(p => p.urlFirebase = urlImg);
}, [urlImg]);
javascript

2 Answers

  1. Best Answer

    removes everything from the state that is an object and leaves it as a String with the url

    In order to modify the structure of the object statecorrectly, the ellipsis operator would have to be used, propagate the object and then indicate the property that is going to change its value.

    On the other hand, Functional Updates refers to the use of the version callbackof useState, it allows us to capture the previous state, modify it and return its new state.

    It might work like this:

    useEffect(() => {
    //version callback del setter de useState
    setProyecto(prevState => {
      return {...prevState, urlFirebase : urlImg}
    })
}, [urlImg]);

    Cheers

    Functional Updates and computed property

    • 1

  2. In order to avoid the warning displayed within dependencies, you must add "project" to your array at the end of "useEffect", like so:

    useEffect(() => {
setProyecto(p => p.urlFirebase = urlImg);
}, [urlImg, proyecto]);
    • 0