call function from useEffect and other function

All we need is an easy explanation of the problem, so here it is.

i have a child component which emits an action to the parent component with a event:

Child component:

export default function ChildComponent(props) {
  const classes = useStyles();
  const [value, setValue] = React.useState([0, 5]);

  const handleChange = (_, newValue) => {
    setValue(newValue);
    props.updateData(newValue)
  };

  return (
    <div className={classes.root}>
      <GrandSonComponent
        value={value}
        onChange={handleChange}
      />
    </div>
  );
}

Parent component:

export const ParentComponent = () => {
  const [loading, setLoading] = React.useState(true);
  const { appData, appDispatch } = React.useContext(Context);

  function fetchElements(val) {
    fetchData(val);
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => { return fetchData() }, []);

  async function fetchData(params) {
    const res = await axios.get('/url', { params });
    appDispatch({ type: "LOAD_ELEMENTS", elements: res.data });
  }

  return (
    <div>
      <ChildComponent updateData={fetchElements}  />
    <div>
     .
     .
     .
   )
};

i would like to know how to remove this line // eslint-disable-next-line react-hooks/exhaustive-deps

I need to add this line, because otherwise i see the eslint error:

React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the 
dependency array.eslintreact-hooks/exhaustive-deps

i need to use fetchData(params) function for the first time page is rendered and when user change/click value of child component with no eslit warnings!

Thanks!

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

First of all, you don’t need to return the result of calling fetchData() function inside the useEffect hook.

Now coming to your problem, reason why you get a warning is because missing the dependencies of the useEffect could lead to bugs due to closures. React recommends that you don’t omit any dependencies of the useEffect hook, useCallback hook, etc.

This sometimes leads to infinite loop of state update and re-render but that can be prevented by either using useCallback hook or other ways that could prevent useEffect hook from executing after each re-render of the component.

In your case, you could fix the problem by following the steps mentioned below:

  1. Wrapping fetchData function in a useCallback hook

    const fetchData = useCallback(async (params) => {
       const res = await axios.get('/url', { params });
       appDispatch({ type: "LOAD_ELEMENTS", elements: res.data });
    }, []);
    
  2. Add fetchData in the dependency array of the useEffect hook

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply