dev-resources.site

for different kinds of informations.

Closures and useEffects

Published at

6/22/2022

Categories

react

javascript

useref

useeffect

Author

sebzz

Main Article

https://dev.to/sebzz/closures-and-useeffects-1ai7

Categories

4 categories in total

Author

5 person written this

Closures and useEffects

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

useref Article's

29 articles in total

How to create components interfaces using useRef/forwardRef/useImperativeHandle

Hooks Behind The Scenes 3, UseRef!!!

Mastering React's useRef Hook: Working with DOM and Mutable Values

Understanding useRef: A Beginners Guide

useRef Hook Explained

useRef() in React . . .

React State Management: When & Where add your states?

Unlocking the Power of useRef: Besic to Advanced Examples for React Developers

Leveraging useRef in TypeScript for Efficient DOM Manipulation

Unlocking the Power of React Hooks

React.useRefの理解を含めるエクササイズ

Mastering React's useRef Hook: A Deep Dive

Unlocking the Power of useRef in React: 12 Essential Use Cases

Série React Hooks: useRef

Toggle Password Visibility Using React useRef

Stop using useState for everything

Using React hooks to develop a Video Player

React - How to load a form with the latest data

React: сфокусировать поле ввода по чекбоксу

How do I check/uncheck all checkboxes with a button In React Js using useRef() Hook ?

Multiple item using one ref

Closures and useEffects

currently reading

I need help. TypeError: Cannot read properties of undefined (reading 'current')

Using React useRef Hook to access immediate past props or state.

Compare Props in React Functional Components.

Creating infinitely scrolling SPA using React

useRef()가 순수 자바스크립트 객체라는 의미를 곱씹어보기

Complete useRef() hook with live code examples

Useful Patterns with React hooks

Featured ones:

abubakersiddique761