refresh table with useEffect

Question

i'm new to react and i have the following problem: useEffect is updating infinite times, but i just want it to update the data when i insert a new record, i would be grateful if someone can correct me.

this is my code:

index.js

import {createUser, getUsers} from '../actions';

const Home = () => {
    const [data, setData] = useState([]);

useEffect(() => {
    async function fetchData(){
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    }
    fetchData();
}, [setData]);

const handleCreateUser = (user) => {
    createUser(user).then((users) => {
    });
};

if i put on the second param useEffect(() => {}, [setData]), it breaks the infinite loop but the table does not update when i insert a new register and I need to use F5.

what am i doing wrong? the create user is working perfectly, i just want to att in the same time the table

Where is your table component? Are you using any npm package for it? Add the code for it as well. — pritam, Jan 18 '20 at 19:21

score 28 · Accepted Answer · edited Oct 10 '22 at 19:11

In useEffect, without a second parameter (an array of dependencies), your effect will run indefinitely.

If you only want your effect to run when you create a new user, you can make a separate state which is included in the dependencies of useEffect, call it a refreshKey for example. My suggestion would be:

import {createUser, getUsers} from '../actions';

const Home = () => {
    const [data, setData] = useState([]);
    const [refreshKey, setRefreshKey] = useState(0);

useEffect(() => {
    async function fetchData(){
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    }
    fetchData();
}, [refreshKey]);

const handleCreateUser = (user) => {
    createUser(user).then((users) => {
      // Refresh the effect by incrementing 1
      setRefreshKey(oldKey => oldKey +1)
    });
};

@gabrielgraciani I would appreciate if you could mark my answer as helpful — Dang Hai Luong, Jan 18 '20 at 20:54
Why do you pass a function to setRefreshKey and not just oldKey + 1 ? — mvmn, May 27 '22 at 22:00

score 2 · Answer 2 · answered Nov 24 '20 at 09:43

You can leave the dependancy array blank so it will run only once.

hope this will help you understand better.

   useEffect(() => {
      doSomething()
    }, [])

empty dependency array runs Only Once, on Mount

useEffect(() => {
  doSomething(value)
}, [value])

pass value as a dependency. if dependencies has changed since the last time, the effect will run again.

useEffect(() => {
  doSomething(value)
})

no dependency. This gets called after every render.

score 1 · Answer 3 · answered Jan 18 '20 at 19:25

It looks like you want to fetch your data only once (on Component Load). If so, just use an empty array for your dependencies

useEffect(() => {
    async function fetchData(){
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    }
    fetchData();
}, []);

score 0 · Answer 4 · answered Oct 10 '22 at 00:55

0

In your example, the second parameter to useEffect should be data; not setData.

answered Oct 10 '22 at 00:55

lisimba.gilkes

166
1
5

score -1 · Answer 5 · edited May 19 '21 at 12:56

I had the exact problem. I wanted to use a functional component and I had to draw a table after my request came back. If I used [] as the second parameter, the webpage would load one time and hence the chart would not be updated. And when I put something in dependencies i would have had my page reloading indefinitely. I should mention that I put one of my states as the dependency which I defined with useState() hook.

To overcome the situation, I turned my component into a class-based component. This was due to the fact that I wasn't supposed to pass props. But this is not a solution and I can share the code if it helps.

refresh table with useEffect

5 Answers5