Reactjs how to use useEffect to handle many changes to useState

Question

I have numerous useStates in my app. I am using useEffect to dispatch an action to my reducer. Instead of using a single useEffect for each change to useState, I would like to, for efficiency and readability sake, put all the state changes in a single useEffect. It does not seems to work as I invisioned. What is the correct syntax to make it functional

const [nameFirst, setNameFirst] = useState('');
const [nameLast, setNameLast] = useState('');
const [nameEmail, setNameEmail] = useState('');
const [namePhone, setNamePhone] = useState('');

useEffect(() => {
    if (nameFirst) {
        dispatch({ type: "NAME_FIRST", nameFirst: nameFirst });
    } else if (nameLast) {
        dispatch({ type: "NAME_LAST", nameLast: nameLast });
    } else if (nameEmail) {
        dispatch({type: "NAME_EMAIL", nameEmail: nameEmail});
    } else if (namePhone) {
        dispatch({type: "NAME_PHONE", namePhone: namePhone});
    }
}, [nameFirst, nameLast, nameEmail, namePhone]);

What I would like to avoid is something like...

useEffect(() => {
        dispatch({ type: "NAME_FIRST", nameFirst: nameFirst });
}, [nameFirst]);

useEffect(() => {
        dispatch({ type: "NAME_LAST", nameLast: nameLast });
}, [nameLast]);

useEffect(() => {
        dispatch({type: "NAME_EMAIL", nameEmail: nameEmail});
}, [nameEmail]);

useEffect(() => {
    dispatch({type: "NAME_PHONE", namePhone: namePhone});
}, [namePhone]);

As it doesn't seem very DRY

I actually prefer the 2nd approach; it's easier to read what each `useEffect` should do — Luis Filipe, Aug 11 '20 at 13:05
Did you consider to use the redux hook `useSelector` instead of useState? — Luis Filipe, Aug 11 '20 at 13:08
@LuisFilipe I did not consider the useSelector hook. I am using the contextAPI, and not redux, if that changes your comment — IWI, Aug 11 '20 at 13:10
so, where is `dispatch` coming from? it's contextApi and not redux? — Luis Filipe, Aug 11 '20 at 13:14
@LuisFilipe correct, from context api `const dispatch = useContext(DispatchContext);` — IWI, Aug 11 '20 at 13:23

score 2 · Accepted Answer · answered Aug 11 '20 at 13:18

you want to fire useEffect if one of the effect's dependancy is changed. not others. the simplest approach is use multiple useEffects. but the if & else if is incorrect & will not work.

I think you want this & actually the correct question is:
React useEffect Fire Hook when only one of the effect's deps changes, but not the others

some solutions:

React useEffect Hook when only one of the effect's deps changes, but not the others

one solution is compare prevState with nextState and if there is a change, fire that!

How to compare oldValues and newValues on React Hooks useEffect?

score 1 · Answer 2 · answered Aug 11 '20 at 13:11

The first approach uses else if so it means you only update one of them; maybe you wish to update more than one?

Nevertheless, I actually prefer the 2nd approach; it's easier to read what each useEffect should do

Finally, have you considered using redux hook useSelector instead of useState? Unless you are doing something extra when updating the state useSelector should be the best option for you

score 0 · Answer 3 · answered Aug 11 '20 at 13:19

How about this code?

const [data, setData] = useState({
    nameFirst: "",
    nameLast: "",
    nameEmail: "",
    namePhone: "",
});

useEffect(() => {
    setData(() => {
      data.nameFirst && dispatch({ type: "NAME_FIRST", nameFirst: nameFirst });
      data.nameLast && dispatch({ type: "NAME_LAST", nameLast: nameLast });
      data.nameEmail && dispatch({type: "NAME_EMAIL", nameEmail: nameEmail};
      data.namePhone && dispatch({type: "NAME_PHONE", namePhone: namePhone});
      return data;
    })
}, [data]);

Reactjs how to use useEffect to handle many changes to useState

3 Answers3