call function from useEffect and other function

Question

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!

This doesn't answer your specific question, but `useEffect(() => { return fetchData() }, []);` is not how you would call the function the first time it renders. When you return from a use effect, it will assume it's a cleanup function, in this case to run on **unmount**. `fetchData`also returns a promise, so it would break when it tries to call it. Remove the`return` keyword. — Brian Thompson, Nov 14 '20 at 17:38
*This doesn't answer your specific question* - it wasn't supposed to. It was pointing out a second problem in your code. — Brian Thompson, Nov 14 '20 at 17:41
You can use `useRef` for the same. [stackoverflow.com/a/70255826/8494462](https://stackoverflow.com/a/70255826/8494462) — Shivam Sharma, Dec 07 '21 at 06:37

Yousaf · Accepted Answer · 2021-09-14T04:47:56.330

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:

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 });
}, []);

Add fetchData in the dependency array of the useEffect hook
```
useEffect(() => {
    fetchData();
}, [fetchData]);
```

thanks, if i add `useEffect(() => { fetchData() }, [fetchData])` warning appear in fetchData function; `The 'fetchData' function makes the dependencies of useEffect Hook (at line 26) change on every render. To fix this, wrap the definition of 'fetchData' in its own useCallback()` — 1pct, Nov 14 '20 at 17:42

call function from useEffect and other function

1 Answers1

Linked