Closures and useEffects

Sebin CM — Wed, 22 Jun 2022 12:49:57 +0000

import { useState, useEffect} from "react";

export default function App() {
  const [count, setCount] = useState(0);

   useEffect(() => {
     setTimeout(() => {
       console.log(" ", count);
    }, 3000);
   }, []);

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Click Me </button>
    </div>
  );
}

The above code will display the value of count when the component renders. In the meantime if we click the button and try to change the value of count. The value of count changes but the log will contain the value zero. This also happens when you are working with async function.

We can get around this problem by using useRef hook. The code is as follows.

import { useState, useEffect, useRef } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  countRef.current = count;

  useEffect(() => {
    setTimeout(() => {
      console.log("useRef", countRef.current);
    }, 3000);
  }, []);

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Click Me </button>
    </div>
  );
}

using the above block of code we can get the current value of the variable while logging it to the console

Looking for an open-source mentor

Sebin CM — Sun, 16 Jan 2022 18:38:50 +0000

I am very much interested in contributing to open source and I am looking for a mentor who can guide me through the basics and help me understand the codebse. I cant wait for my first PR. I would love to work with java java-script or golang.
Thank-you

DEV Community: Sebin CM

Closures and useEffects

Looking for an open-source mentor