How to add DOM elements to my state, with useEffect hook without error/warning in the console?

Question

I'm actually trying to target some DOM elements in my empty state with useState and useEffect hooks.
No problem at all, I think I'm doing right. Here's my actual code :

const [state, setState] = useState({
    title: [],
    subtitle: []
});

useEffect(() => {
    const myNewTitle = ["Hello", "World"];
    const myNewSubtitle = ["What's", "up?"];

    setState({...state, title: myNewTitle, subtitle: myNewSubtitle})
    console.log(state)
}, [state]);

Here, my console displays an infinite loop.
I tried to write an empty array [], but the new values of my state are not displaying in the console, like I would like to.
So, I wrote this : [state.title[0], state.subtitle[0]]);

I don't know if my code is correct or not. The console displays what I wanted, the new values of my state.
But I got this warning in my console :

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

Actually, I don't know how to fix this issue. Can someone help me, please ?

Precisions : Of course, this is a really easy example. In my project, I want to re-use my state (title+subtitle) in functions wrote outside of the useEffect hook.

Take a look at this. It is not advised to use setState inside of useEffect because you can get an infinite loop: https://stackoverflow.com/questions/53715465/can-i-set-state-inside-a-useeffect-hook — Jeremy Harris, Mar 03 '20 at 15:21
Could you be mixing up setState (pre-hook state management) with useState (state changes with hooks)? Both can be used to achieve the same thing, hooks (useState, useEffect) are the new way to do it — van, Mar 03 '20 at 15:23
You can definitely use `setState` inside `useEffect` but you're going to get an infinite loop if there's not a conditional set, or you pass an empty array for the dependencies, as referenced by @van answer below. Also, check out [this answer](https://stackoverflow.com/a/54923969/6395983) on the same page referenced above. — displacedtexan, Mar 03 '20 at 15:45
Hey @displacedtexan, thanks for the post mention ! I tried the empty array, like I wrote in my post. But the console does not display the new content of my state. So, I'm pretty lost with that. — Lucie Bachman, Mar 03 '20 at 15:55

score 2 · Accepted Answer · answered Mar 03 '20 at 19:17

You can avoid having to put state in the dependency list by using the callback version of setState() which has the current state as a parameter.

Since that parameter is local (inside) the useEffect, it's not necessary to declare it as a dependency.

useEffect(() => {

  const myNewTitle = ["Hello", "World"];
  const myNewSubtitle = ["What's", "up?"];

  setState(oldState => {
    return {...oldState, title: myNewTitle, subtitle: myNewSubtitle};
  });

}, []);

score 0 · Answer 2 · answered Mar 03 '20 at 15:30

//can be anything, a string, undefined, a boolean
const [title, setTitle] = ("");
const [subtitle, setSubtitle] = ("");

//when the component is (re)rendered, this will be called.
useEffect(() => {

},[])
//"keeping track" of anything in the array, when they are updated, useEffect is executed

then in your component, you can call setSubtitle("the value you want to update it with")

How to add DOM elements to my state, with useEffect hook without error/warning in the console?

2 Answers2