CODEWITHSUNDEEP
javascriptreactjs
Danav
Danav

Reputation: 55

Stop re-rendering while using useContext

I am using useContext which is re-rendering everything unexpectedly. You can see the results in the attached picture. My count updates multiples times in a second

**//app component**

import React, { useState, useContext, memo } from "react";
import StateProvider from "./Components/StateComp";
import Count from "./Components/Count";
import CountUpdater from "./Components/CountUpdater";
const App = memo(() => {
  return (
    <>
      <StateProvider>
        <Count/>
        <CountUpdater />
      </StateProvider>
    </>
  );
})
export default App;


**//StateProvider comp**

import React, { useState, createContext } from "react";
export const StateContext = createContext();
function StateProvider({children}) {
  const [count, setCount] = useState(1000);
  return <StateContext.Provider value={{count, setCount}}>{children}</StateContext.Provider>;
}
export default StateProvider;


**//Count Comp**

import React, { useContext } from "react";
import { StateContext } from "./StateComp";
function CountComp() {
  const { count } = useContext(StateContext);
  return <h1>Count: {count}</h1>;
}
export default CountComp;


**//CountUpdater comp**

import React, { useContext, useEffect } from "react";
import { StateContext } from "./StateComp";
function CountUpdater() {
  const { count, setCount } = useContext(StateContext);
  setInterval(() => {
    setCount(count + 1);
    console.log("Updated count: ", count);
  }, 1000);
  return <h1>Updated count: {count}</h1>;
}
export default CountUpdater;

How can I resolve this, memo isn't working and I tried useEffect adding dependencies but its too worthless?

Console Results:

Console Results

Upvotes: 1

Views: 87

Answers (2)

Sifat Haque
Sifat Haque

Reputation: 6057

You need to clear out your timeout inside useEffect.

function CountUpdater() {
    const { count, setCount } = useContext(StateContext);
    useEffect(() => {
        let interval = setInterval(() => {
            setCount(count + 1);
            console.count('updated');
        }, 1000);

        return () => clearInterval(interval);
    }, [count, setCount]);

    return <h1>Updated count: {count}</h1>;
}

Upvotes: 1

Danav
Danav

Reputation: 55

With the help of @keith, I found out its answer. Like he said, I needed to put clearInterval on return() also in useEffect

**//CountUpdater comp**

function CountUpdater() {
  const { count, setCount} = useContext(StateContext);
  
  useEffect(() => {
    const interval= setInterval(() => {
      setCount(count+ 1);
      console.log("Updated Count: ", count);
    }, 1000);
    return () => clearInterval(interval);
  }, [count, setCount]);
  
  return <h1>Updated count: {count}</h1>;
}

export default CountUpdater;

Upvotes: 1

Related Questions