React TypeScript: Alternatives to UseRef in functional components

Question

Is there another way of getting/setting the values from the dom that is less expensive than useRef()? Is useRef() to be used lightly as the docs suggest?

import React, { useRef, useEffect } from 'react';

const Join: React.FC = () => {

  const fullName = useRef<HTMLInputElement>(null);
  const email = useRef<HTMLInputElement>(null);
  const password = useRef<HTMLInputElement>(null);
  const myForm = useRef<HTMLFormElement>(null);

  useEffect(() => {
    if (myForm.current) myForm.current.reset();
    if (fullName.current) fullName.current.focus();
  }, []);


  return (
    <div>
      <form ref={myForm}>
       <input type='text' ref={fullName} />
       <input type='text' ref={email} />
       <input type='text' ref={password} />
      </form>
    </div>
  )

}

Chaging a ref won't trigger another render. Usually it is a bad idea to access methods like focus. What are you trying to acomplish with this code? Please take a look at reactjs.org/docs/refs-and-the-dom.html — Dupocas
– Dupocas, Commented Nov 19, 2019 at 14:29
Still its not clear, why you used useRef, can you give more info? — Piyush Dhamecha
– Piyush Dhamecha, Commented Nov 19, 2019 at 14:29
When the component loads I want to clear the form and focus the fullName input — Bill
– Bill, Commented Nov 19, 2019 at 14:31

Dupocas · Accepted Answer · 2019-11-19 14:38:03Z

3

When the component loads I want to clear the form and focus the fullName input

You don't need refs for that

I want to clear the form

Make your inputs controlled
Declare an empty string as initial value

const Component = () =>{
    const [state, setState] = useState({
        email : '',
        password : ''
    })

    const onChange = ({ target: { value, name } }) =>{
        setState(prev => ({
            ...prev,
            [name] : value
        }))
    } 

    const { email, password } = state
    return(
        <>
            <input value={email} onChange={onChange} id='email'/>
            <input value={password} onChange={onChange} id='password' />
        </>
    )
}

Automatically focus a given input

Just use autofocus for that

<input autofocus/>

answered Nov 19, 2019 at 14:38

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bill Over a year ago

value={email} should this not be value={state.email} ??

Bill Over a year ago

I can see that onChange is updating the state, but how does the form get cleared?

Dupocas Over a year ago

I've destructured email and password from state so i don't have to type state.email. Now to clear the form is just setting the state as the initial. state = '' pass = ''

Collectives™ on Stack Overflow

React TypeScript: Alternatives to UseRef in functional components

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related