how to render react functional component after interval

Question

  useEffect(() => {
    const url = `https://......com/..../${id}`;
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        console.log(serviceDetail);
        setServiceDetail(data);
      });

Note: I want it to render it after a certain time like every 5 seconds.(more or less)

not to fix the issue. I want it to render after a certain time like 5 seconds. — Gazi Md Kawsar Hossain, Jan 05 '22 at 10:10

Mayur Vaghasiya · Accepted Answer · 2022-01-06T05:10:16.090

0

Try this code it's helps

function App() {
  const [serviceDetail, setServiceDetail] = useState(0);

  const handleApiCall = () => {
    const url = 'https://......com/..../${id}';
    fetch(url).then((res) => res.json()).then((data) => {
      console.log(serviceDetail); setServiceDetail(data);
    });
  }
  useEffect(() => {
    handleApiCall(); //for call api init time 
   
   const interval = setInterval(() => {
      handleApiCall(); // call api after 5 seconds
    }, 5000);

    return () => clearInterval(interval); // clear interval after component unmounts.
  });

  return (
    <div>

    </div>
  );
}
export default App;

edited Jan 06 '22 at 05:10

answered Jan 05 '22 at 10:16

Mayur Vaghasiya

1,383
2
12
24

you need to `clearInterval` when the component unmounts. you can do this by returning a thunk, `() => { ... }` from `useEffect`. See [Effects with cleanup](https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup) in the docs – Mulan Jan 05 '22 at 17:08

Mulan · Answer 2 · 2022-01-05T17:49:54.673

The (currently) accepted answer misses an important detail. When the component unmounts, the interval will keep running. To stop it, you need to clearInterval. Another mistake is useEffect is called without dependencies. Here we use useCallback to generate a function that will only update when the id updates. Both the callback and the id are passed as dependencies to useEffect -

const [data, setData] = useState(...)

const update = useCallback(id =>
  fetch(`http://.../${id}/`)
    .then(r => r.json())
    .then(setData),
  [id]
)

useEffect(() => {
  const t = setInterval(_ => update(id), 5000)
  return () => clearInterval(t)
}, [update, id])

In a related Q&A we introduce a custom useInterval hook that makes it easy for components to work with interval-based state. See the post for a fully functioning code demonstration.

how to render react functional component after interval

2 Answers2