Developer Tip of the Week: React Hooks

React Hooks are in-built functions that allow React developers to use state and lifecycle methods inside functional components. And yes, they also work together with existing code.  Here are 5 React Hooks you should know:

‍

useState()

The useState() Hook allows React developers to update, handle and manipulate state inside functional components. This is, probably, the most popular React Hook

Here's to use the useState() react hook:

function App() {
  const [age, setAge] = useState(19);
  const handleClick = () => setAge(age + 1)

  return
      <div>
          I am {age} Years Old
        <div>
        <button onClick={handleClick}>Increase my age! </button>
      </div>
   </div>
}

useEffect()

The useEffect() hook accepts a function that would contain effectual code, like mutations, subscriptions, timers, logging etc. This is probably the most controversial React Hook 😉 

‍

Here's how to use the useEffect() React Hook:

‍

function App() {
  const [age, setAge] = useState(19);
  const handleClick = () => setAge(age + 1)
   useEffect(() => {
    // Update the document title using the browser API
    document.title = `You are ${age} years old` ;
  });
‍
  return
      <div>
          I am {age} Years old
        <div>
        <button onClick={handleClick}>Increase my age! </button>
      </div>
   </div>
}

useRef()

‍

The useRef() Hook returns a mutable ref object whose .current property is initialized to the passed argument (initialValue).

‍

Here's how to use the useRef() React Hook:

‍

const refContainer =useRef(initialValue);

‍

useContext()

‍

The useContext() Hook gives functional components easy access to the React app context.

‍

Here's how to use the useContext() react hook:

const value = useContext(MyContext);

‍

useLayoutEffect()

‍

The useLayoutEffect() Hook is similar to  useEffect(), however, it fires synchronously after all DOM mutations, so timing is important.

‍

Here's how to use the useLayoutEffect() React Hook:

useLayoutEffect(() => {
      // do side effects
     return () => /* cleanup */
}, [dependency, array]);

‍