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 vote382 views1 answer
Reactive forms change event in angular
Javascript React
0 vote364 views1 answer
Text input placeholder font family react native
Javascript React
0 vote528 views1 answer
React-data-table-component cell action stack overflow
Javascript React
0 vote370 views1 answer
Swap scroll right in react native
Javascript React
0 vote334 views1 answer
React component in for loop
Javascript React
33 votes356 views2 answers
UseRef react ref
Javascript React
29 votes317 views2 answers
React or vue
Javascript React
16 votes325 views1 answer
DangerouslySetInnerHTML did not match error in React
Javascript React
2 votes324 views2 answers
Chrome back button click event react
Javascript React
0 vote334 views1 answer
How to use elements of 'react-router-dom'
Javascript React