Top React Hooks — Input, Modals, and Lazy Load Images

Photo by Holger Link on Unsplash

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use-input

The react-use-input lets us bind to inputs easily with our React component.

To use it, we run:

yarn add react-use-input

Then we can use it by writing:

import React from "react";
import useInput from "react-use-input";
export default function App() {
  const [name, setName] = useInput();
  return (
    <>
      <input value={name} onChange={setName} />
      <p>{name}</p>
    </>
  );
}

We just use the useInput hook, which returns an array with the form field state and the function to set the input value to the form field state.

Likewise, we can do the same for a checkbox.

For example, we can write:

import React from "react";
import useInput from "react-use-input";
export default function App() {
  const [selected, setSelected] = useInput(false, "checked");
  return (
    <>…