Should I use createRef or useRef and why?

Question

In this component I'm not sure if I should use createRef and useRef to get the information from the input. Can you please help me figuring out how I should choose one or the other? Thanks in advance

import React from 'react'

const AddBook = (props) => {

    const handleNewBook = props.handle
    let titleInput = React.createRef();
    let authorInput = React.createRef();

    return (
      <div className="add-book">
        <span className="add-book-title">Add a book:</span>
        <form>
          <input type="text" ref={titleInput} placeholder="Title" />
          <input type="text" ref={authorInput} placeholder="Author" />
          <button
            type="reset"
            onClick={() =>
              handleNewBook(titleInput.current.value, authorInput.current.value)
            }
          >
            Add
          </button>
        </form>
      </div>
    );
}

export default AddBook

It's better to use controlled inputs, with `value`, `onChange` and keeping the value in state. Typically you would use `ref` for things like `inputRef.focus()` which need direct access to component. — Sulthan, Feb 03 '21 at 20:15
https://stackoverflow.com/questions/54620698/whats-the-difference-between-useref-and-createref — HichamELBSI, Feb 03 '21 at 20:16
i also had a phase where i wanted to use useRef for textinputs because i didn't like how the state change caused a rerender every time i changed the text...it's not worth it. useState is so much more straightforward, it just works. also, every so often facebook changes how refs work, one day it's ref.value, another its ref.current.value...it's just a hassle. also ref contains a lot of metainformation that you dont need. just use state. :) — Qrow Saki, Feb 03 '21 at 20:23

score 6 · Accepted Answer · answered Feb 03 '21 at 20:17

6

CreateRef is usually used in class components.

useRef (a hook that creates a ref) is used in functional components.

Since you are using functional best use useRef.

answered Feb 03 '21 at 20:17

YTG

956
2
6
19

score 2 · Answer 2 · answered Feb 03 '21 at 20:19

For the difference between useRef and createRef: What's the difference between `useRef` and `createRef`?

Anyway, in your case, if you need a controlled input you should deal with the component state:

import React, { useState } from 'react';

const AddBook = (props) => {

    const handleNewBook = props.handle
    const [state, setState] = useState({})

    return (
      <div className="add-book">
        <span className="add-book-title">Add a book:</span>
        <form>
          <input type="text" value={state.title} onChange={e => setState(prev => ({...prev, title: e.target.value}))} placeholder="Title" />
          <input type="text" value={state.author} onChange={e => setState(prev => ({...prev, author: e.target.value}))} placeholder="Author" />
          <button
            type="reset"
            onClick={() =>
              handleNewBook(state.title, state.author)
            }
          >
            Add
          </button>
        </form>
      </div>
    );
}

Typically you would use `const [title, setTitle] = useState('');`, the same for `author`. Which would make your input much more readable ` setTitle(e.target.value)} />` — Sulthan, Feb 03 '21 at 20:25

Should I use createRef or useRef and why?

2 Answers2