How to updating initial values (several data) in react-hooks?

Question

I got an warning message after i created a function to set value data current user loggedin and called it in useEffect. Here's the code:

import React, { useEffect, useState } from "react";
...

const AddPost = () => {
  const userStorage = sessionStorage.getItem('user');
  const [values, setValues] = useState({
    userId: '',
    authorName: '',
    title: '',
    content: '',
    likes: '',
    dislikes: ''
  });

  useEffect(() => {
    getCurrentUserInfo();
  },[]);

  const getCurrentUserInfo = () => {
    if(userStorage !== null) {
      setValues({
        ...values,
        userId: userStorage.id,
        authorName: userStorage.userName,
      })
    }
  }
  ...
export default AddPost;

i just want to set userId and authorName from user logged in data, so in function setValues i get all initial values, then i update userId and authorName only. And suddenly there's warning message in my browser console, and it says

React Hook useEffect has a missing dependency: 'getCurrentUserInfo'. Either include it or remove the dependency array

i try to remove [] in useEffect, but it causes my browser lag because useEffect do looping called function. i try to add values and userStorage or one of them inside [], still not successed. is there any solutions for this?

Answer 1

It's always recommended to add all the dependencies in array required for the useEffect hook which in your case is getCurrentUserInfo function, which is why it's showing the warning.

To avoid this you can define the getCurrentUserInfo inside the useEffect hook and not provide that as dependency. You can also use callback pattern to update state to avoid values as a dependency and you will still need to provide userStorage as dependency. And for userStorage you can memoize that value using useMemo so it doesn't cause rerenders.

     const userStorage = useMemo(() => sessionStorage.getItem('user'), [sessionStorage]);

      useEffect(() => {
        const getCurrentUserInfo = () => {
        if(userStorage !== null) {
          setValues(values => ({
            ...values,
            userId: userStorage.id,
            authorName: userStorage.userName,
          }))
        }
      }

        getCurrentUserInfo();
      },[userStorage]);
    
  

Answer 2

  useEffect(() => {
    getCurrentUserInfo();
  },[getCurrentUserInfo]);

You should add the function inside the dependency array. But note, this is not neccessary if you don't add it to the array it will simply run once. When you do add it to the array it will run whenever the function is updated, which is this case will be one time.

The react official documentation:

If you use this optimization, make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect.

Answer 3

[SOLVE]

I wanna put the answer for my question how to update several data, and remove looping call function because useEffect. So for the first i remove the function and just set the value inside useEffect.

useEffect(() => {
  if(userStorage !== null) {
    setValues({
      ...
    })
  }
},[]);

and inside setValues, i put like this

setValues(values => ({
  ...values,
  userId: userStorage.id,
  authorName: userStorage.userName,
}))

then the final code like this

useEffect(() => {
  if(userStorage !== null) {
    setValues(values => ({
      ...values,
      userId: userStorage.id,
      authorName: userStorage.userName,
    }))
  }
},[]);