What’s the difference between `useRef` and `createRef`?

by

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);

Edit 1rvwnj71x3

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  3. How can I use multiple refs for an array of elements with hooks?
  4. How can I use React hooks in React classic `class` component?
  5. Invalid hook call. Hooks can only be called inside of the body of a function component
  6. Can I set state inside a useEffect hook
  7. How to call an async function inside a UseEffect() in React?
  8. Why is useState not triggering re-render?
  9. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  10. componentDidMount equivalent on a React function/Hooks component?
  11. Where can I make API call with hooks in react?
  12. How to register event with useEffect hooks?
  13. Is there a generic way to set state in React Hooks? How to manage multiple states?
  14. React Function Components with hooks vs Class Components
  15. React hooks: accessing up-to-date state from within a callback
  16. React Hooks – What’s happening under the hood?
  17. useEffect does not listen for localStorage
  18. setTimeout for this.state vs useState
  19. Why need useRef and not mutable variable?
  20. Next.js context provider wrapping App component with page specific layout component giving undefined data
  21. Determine which dependency array variable caused useEffect hook to fire
  22. React hooks: call component as function vs render as element
  23. React hooks useState setValue still rerender one more time when value is equal
  24. Updating state to the same state directly in the component body
  25. Proper way of using React hooks + WebSockets
  26. React hook useEffect runs continuously forever/infinite loop
  27. useMemo vs. useEffect + useState
  28. Equivalent to componentDidUpdate using React hooks
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment