I have numerous `useState`s 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