Breaking News: Grepper is joining You.com. Read the official announcement!

useRef() vs createRef()

Jittery Jellyfish answered on November 29, 2021 Popularity 9/10 Helpfulness 4/10

answer useRef() vs createRef()

related useRef() vs createRef()

useRef() vs createRef()

Comment

The difference is that createRef will always create a new ref. 
In a class-based component, you would typically put the ref in an instance property during construction (e.g. this.input = createRef()). 
You don't have this option in a function component. useRef takes care of returning the same ref each time as on the initial rendering.

Here's an example app demonstrating the difference in the behavior of these two functions:
___
import React, { useRef, createRef, useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [renderIndex, setRenderIndex] = useState(1);
  const refFromUseRef = useRef();
  const refFromCreateRef = createRef();
  if (!refFromUseRef.current) {
    refFromUseRef.current = renderIndex;
  }
  if (!refFromCreateRef.current) {
    refFromCreateRef.current = renderIndex;
  }
  return (
    <div className="App">
      Current render index: {renderIndex}
      <br />
      First render index remembered within refFromUseRef.current:
      {refFromUseRef.current}
      <br />
      First render index unsuccessfully remembered within
      refFromCreateRef.current:
      {refFromCreateRef.current}
      <br />
      <button onClick={() => setRenderIndex(prev => prev + 1)}>
        Cause re-render
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Popularity 9/10 Helpfulness 4/10 Language whatever

Source: stackoverflow.com

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Nov 29 2021

Jittery Jellyfish

0 Answers Avg Quality 2/10

Closely Related Answers

useRef() vs createRef()

Comment

import React, { useRef, createRef, useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [renderIndex, setRenderIndex] = useState(1);
  const refFromUseRef = useRef();
  const refFromCreateRef = createRef();
  if (!refFromUseRef.current) {
    refFromUseRef.current = renderIndex;
  }
  if (!refFromCreateRef.current) {
    refFromCreateRef.current = renderIndex;
  }
  return (
    <div className="App">
      Current render index: {renderIndex}
      <br />
      First render index remembered within refFromUseRef.current:
      {refFromUseRef.current}
      <br />
      First render index unsuccessfully remembered within
      refFromCreateRef.current:
      {refFromCreateRef.current}
      <br />
      <button onClick={() => setRenderIndex(prev => prev + 1)}>
        Cause re-render
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 29 2021

Jittery Jellyfish

0 Answers Avg Quality 2/10

useRef() vs createRef()

Contents

More Related Answers

useRef() vs createRef()

Closely Related Answers

useRef() vs createRef()

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.