DEV Community

Kaartik Nayak
Kaartik Nayak

Posted on • Originally published at kaartiknayak.vercel.app

Using UseRef hook for form data

#react #reacthooks #webdev #productivity

In this blog we will see how to use useRef hook instead of the useState hook.

The usual way:

export default function Form() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  const submit = (e) => {
    e.preventDefault();
    console.log(email, password);
  };
  // rerenders component eveytime when a character is added in the input field
  React.useEffect(() => {
    console.log("value changed");
  }, [email, password]);

  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input
        type="email"
        name="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <label htmlFor="password">Password</label>
      <input
        type="password"
        name="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

Using useRef hook 

export default function Ref() {
  const emailRef = React.useRef(null);
  const passwordRef = React.useRef(null);
  const submit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value, passwordRef.current.value);
  };
  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input ref={emailRef} type="email" name="email" />
      <label htmlFor="password">Password</label>
      <input ref={passwordRef} type="password" name="password" />
      <button type="submit">Submit</button>
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

When we use useRefhook, the component does not rerender when the value of the input field changes. This is because the useRef hook does not cause any rerenders. It is used to store the reference of the DOM element.

Conclusion

In this blog we saw how to use useRef hook instead of useState hook. This is useful when we want to store the value of the input field without causing any rerenders 👌

So that's it for this blog.
Hope you liked it 🤗
View my portfolio app
Also, do follow me on Twitter <3

Top comments (2)

Collapse
 
uttam_py profile image
Uttam Sharma • • Edited 
instead of useRef you can  use FormData only to achieve same

import "./styles.css";
export default function App() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const inputObject = Object.fromEntries(formData);
    console.log(inputObject);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button type="submit">Submit</button>
    </form>
  );
}
Thanks 
Happy coding.....
Enter fullscreen mode Exit fullscreen mode
Collapse
 
zabdeldjallil profile image
Djilou •

very cool when you only need the values of the fields when submitting

Read next

harshit_rwt profile image

Top Open Source Communities you should not miss out in 2025🔥

Harshit Rawat -

sanjaysah profile image

FlagFeed: Gamified Tech Learning with Feature Flags 🚀

Sanjay Kumar Sah -

rimi_jalil2002 profile image

Can English Replace Java? The Future of Programming in Plain Language

Rimsha Jalil -

mrinasugosh profile image

3 Myths, 3 Facts, and 3 Strategies to Scale Node.js Apps

Mrinalini Sugosh (Mrina) -