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

13 votes193 views3 answers
ImageBackground in React Native
Javascript React
23 votes183 views2 answers
Create-react-app npm yarn
Javascript React
1 vote193 views1 answer
React js component parameters
Javascript React
0 vote197 views1 answer
Render blaze in react
Javascript React
0 vote199 views1 answer
How to install yup in react native
Javascript React
21 votes199 views6 answers
Elevation react native
Javascript React
32 votes199 views2 answers
How to routing in react js
Javascript React
2 votes191 views2 answers
React detect screen size
Javascript React
0 vote219 views2 answers
Reactjs date display
Javascript React
0 vote193 views1 answer
Setting up react on visual studio code
Javascript React