UseRef() in react

UseRef

/*
	A common use case is to access a child imperatively: 
*/

function TextInputWithFocusButton() {
    const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Source: reactjs.org

What does useref do react

const refContainer = useRef(initialValue);
//useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). 
//The returned object will persist for the full lifetime of the component.

Source: reactjs.org

UseRef() in react

function TextInputWithFocusButton() {
    const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Source: reactjs.org

Useref

  const inputEl = useRef(null);

Useref in react

import { useRef } from 'react';

function LogButtonClicks() {
  const countRef = useRef(0);  
  const handle = () => {
    countRef.current++;    console.log(`Clicked ${countRef.current} times`);
  };

  console.log('I rendered!');

  return <button onClick={handle}>Click me</button>;
}

Source: dmitripavlutin.com

Similar codes

0 vote309 views1 answer
How to remove the top border from table react bootstrap
Javascript React
0 vote308 views1 answer
React set state before render
Javascript React
0 vote296 views1 answer
Navigate to another page onPress button react native
Javascript React
1 vote323 views1 answer
Unexpected token react native stack navigation
Javascript React
5 votes360 views3 answers
Linear gradient css react js
Javascript React
6 votes316 views1 answer
React state management
Javascript React
18 votes315 views2 answers
How to store an array in localstorage reactjs
Javascript React
10 votes373 views2 answers
Generate random string react
Javascript React
6 votes318 views1 answer
Create bottom navigation bar react native
Javascript React
0 vote323 views1 answer
Vscode react cannot find moudle when import image
Javascript React