Using two useeffect react hooks

Question

I try to use react with hooks. I have this state:

const [state, setState] = useState<State>({
    titel: "",
    somethingElse: "",
    tabledata: [],
});

I have two useeffect:

// componentDidMount, Initial variable deklaration
useEffect(() => {
    //Do something

    //Set initial states
    setState({
        ...state,
        titel: props.titel,
        somethingElse: props.somethingElse,
    })

}, []);

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {

    //Do something and generate tabledata
    let tabledata ....

    //Set tabledata
    setState({
        ...state,
        tabledata: tabledata,
    })

}, [props.taenzer]);

Now I have the behavior, that the second useeffect is overwriting the first useeffect setState command. My variable titel and somethingElse is always empty.

Now I could change my deklaration of state, something in this way:

const [titel, setTitel] = useState<>({
    titel = ""
});
const [somethingElse, setSomethingElse] = useState<>({
    somethingElse = ""
});

But this makes the whole unclear and it is not so easy to set the state of several variables in one time like we could with setState(...state, titel="Hello", somethingElse="Else")

Any other possibility?

What do you mean by "second useeffect is overwriting the first useeffect setState command"? I can't see it from example. — Pavel Kratochvil
– Pavel Kratochvil, Commented Oct 3, 2019 at 8:52
Tbh, i like the second approach. Since hooks i try to skip nested states as much as possible. With this approach you can manipulate state really easy in a immutable way. If i go nested, i go for useReducer — Mart
– Mart, Commented Oct 3, 2019 at 8:53
Looks like a race condition. During mount you will get two effects executing and the order is probably undetermined so you will get two nearly simultaneous setState and the last one will "stick" but most likely both will be reading the same initial state. — apokryfos
– apokryfos, Commented Oct 3, 2019 at 9:04

Joseph D. · Accepted Answer · 2019-10-03 09:05:05Z

4

the second useeffect is overwriting the first useeffect setState

useState function doesn't automatically merge the state. So you would need to make use of the previous state accessible via callback.

useEffect(
  () => {
    const tabledata = ...
    setState(prevState => ({ // use previous state
      ...prevState,
      tabledata
    }))
  }, [props.taenzer]
)

Any other possibility?

You can have lazy initialization of your state via props and remove the first effect (without dependency)

const [{ title, somethingElse, tabledata }, setState] = useState<State>({
    ...props,
    tabledata: [],
});

edited Oct 3, 2019 at 9:05

answered Oct 3, 2019 at 8:52

Joseph D.

12.2k4 gold badges40 silver badges72 bronze badges

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

Collectives™ on Stack Overflow

Using two useeffect react hooks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related