0

I have a table that displays tableData. tableData is fetched and processed from a URL and might change (the data might change, not the URL) from time to time. I want to poll that URL, see if the data has changed, and if so, update the tableData using setTableData(<fetched and processed data>).

This is my take on it:

const [tableData, setTableData] = useState([]);

// Fetch data / headers from express server 

useEffect(() => {
    const fetchData = async () => {
        const resp = await fetch('http://localhost:4000/todos/');
        const respData = await resp.json();
        setTableData(respData);
        console.log('debug');
    };
    fetchData()
}, [tableData]);

Part of the function App return:

        <MUIDataTable
            title =  { "Bla Bla" } 
            data =  { tableData } 
            columns =  { tableColumns } 
            options =  { tableOptions } 
        />

This useEffect is called continuously. It is my understanding that it works in the following way:

  1. Call once on the mount
  2. Call each update -> update the tableData with setTableData(respData);
  3. Said data is rendered inside the return

  • If I comment out the set functions, the useEffect is called once.

  • If I use empty Arrays in the return, the useEffect is called all the time (Don't get it... I thought that since I'm using empty Arrays and not the data that is set in the useEffect, the render will be called only once, and that will stop the useEffect loops)

I want to just run the setTableData IFF the data fetched is different from the old data fetched, but nothing I tried doesn't cut it.

CIsForCookies
  • 12,097
  • 11
  • 59
  • 124
  • 1
    Does this answer your question? [fetched data is different from old data, but seems exactly the same](https://stackoverflow.com/questions/63237466/fetched-data-is-different-from-old-data-but-seems-exactly-the-same) – jonrsharpe Aug 04 '20 at 07:13
  • @jonrsharpe not really :-( It shows a problem in the design, but all solutions there don't work. Comparing reference vs. deep compare isn't it, because I need the `fetch` to happen in order to compare, but it stops running – CIsForCookies Aug 04 '20 at 07:15
  • Half the context from that question is missing here, though, including crucially *what you actually want to happen*. `useEffect` *with* a deps list is called on first render and every time its deps change (with an empty list, only on first render). *Without* a deps list it's called on every render. Renders happen when the props or state change. If you want to continuously poll and only sometimes update the state, as your previous question suggests, does either of those seem appropriate? – jonrsharpe Aug 04 '20 at 07:20
  • I've rolled back the update to your previous question; rather than totally changing it *and* asking a new question, [edit] this one to include the relevant context. – jonrsharpe Aug 04 '20 at 07:23
  • Not sure what more to add - as you said, I want to continuously poll the fetched data, and update only when it differs. I'm a bit confused because after re-reading the question, I don't see what else to add – CIsForCookies Aug 04 '20 at 07:27
  • 1
    For one thing, *that*; you don't currently say in the question what you actually want to happen. For another, why you think (especially given the context above) useEffect is the route to implementing that - it doesn't seem like you want to take action only when the component renders. Maybe have a look at e.g. https://overreacted.io/making-setinterval-declarative-with-react-hooks/ if you want to poll. – jonrsharpe Aug 04 '20 at 07:29
  • 1
    Researching "react hooks poll api" got [this](https://stackoverflow.com/a/60498111/3001761). – jonrsharpe Aug 04 '20 at 07:39
  • which is basically https://overreacted.io/making-setinterval-declarative-with-react-hooks/ without the nice wrapping, no? Anyway, that solution from the link did the trick. Thank u for all your help – CIsForCookies Aug 04 '20 at 07:44

0 Answers0