/Javascript/React/How to use useref hook in react

How to use useref hook in react

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

How to use useref hook in react

import React, { useRef } from '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 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 vote259 views1 answer
Can i use hooks with expo in react native
Javascript React
1 vote234 views1 answer
React scroll to bottom of div
Javascript React
8 votes237 views3 answers
Change title react
Javascript React
59 votes211 views3 answers
Npm react router dom
Javascript React
48 votes234 views1 answer
Emmet not working react js
Javascript React
10 votes231 views2 answers
React text input onchange
Javascript React
0 vote254 views1 answer
Header logo react native img
Javascript React
1 vote256 views1 answer
React lottie player on hover
Javascript React
0 vote245 views1 answer
Array map order by timestamp reactjs
Javascript React
0 vote245 views1 answer
Image and video lightbox react
Javascript React