React Hooks 101

React Hooks revolutionized the way we write React components by providing a more elegant and concise way to handle state and side effects. In this blog post, we will dive into the world of React Hooks and explore their benefits, use cases, and how they simplify the development process.

What are Hooks?

In React, Hooks are functions that allow you to use state and other React features in functional components. They were introduced in React version 16.8 to provide a way to use stateful logic without writing a class component.

Hooks are designed to enable developers to reuse stateful logic, making it easier to manage and share code between components. They allow functional components to have local state, perform side effects, and tap into React’s lifecycle methods.

Some commonly used hooks are:

1. useState Hook: This hook allows you to add state to functional components. It returns a stateful value and a function to update that value.

Say you have a counter and you want to track it’s value and update it by incrementing or decrementing the value using buttons, you can achieve this with a useState hook like so.

import React, { useState } from 'react';
export default const CounterState () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  const decrement = () => {
    setCount(count - 1);
  };
  return (
    <div>
      <button onClick={decrement}>-</button>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}

In this example, the useState hook is used to declare a state variable count with an initial value of 0. The setCount function is used to update the value of count when the button is clicked.

2. useEffect Hook: This hook enables you to perform side effects in functional components. It runs after rendering and allows you to manage subscriptions, fetch data, or interact with the DOM.

import React, { useState, useEffect } from 'react';
export default const CounterEffect = () => {
  const increment= () => {
    setCount(count + 1);
  };
  const decrement = () => {
    setCount(count - 1);
  };
  useEffect(() => {
  // This effect will run each time the count value changes
  // This effect updates the title with the count value
    document.title = `Count: ${count}`;
  }, [count]);
  return (
    <div>
      <button onClick={decrement}>-</button>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
};

In this example, the useEffect hook is used to perform side effects in a React component. Inside the useEffect function, we define the side effect we want to perform. In this case, we update the document title with the current count.

The effect is set to run after every render of the component because we didn’t provide any dependencies as the second argument to useEffect . This means that the effect will be triggered on every render.

The useEffect gets more complex than this and has a host of different ways it can be used which will be discussed in a future blog.

3. useRefHook:The useRef hook allows you to create a mutable reference that persists across re-renders of a component. It returns a mutable ref object with a .current property that can be used to store and access values.

import React, { useRef } from 'react';
export default function Home() {
  // Create a ref using the useRef hook
  const inputRef = useRef(null);
  const handleClick = () => {
  // Access the current value of the ref
  console.log(inputRef.current.value);
  };
  return (
  <div>
    <input ref={inputRef} type="text" />
    <button onClick={handleClick}>Log Value</button>
  </div>
  );
};

In this example, the useRef hook is used to create a ref called inputRef. The ref attribute is then assigned to the input element, allowing us to access the input’s value using inputRef.current.value in the handleClick function.

The useRef hook is commonly used for accessing DOM elements, managing focus, or storing any mutable value that needs to persist across re-renders without triggering a re-render itself.

Conclusion:

These are just a few of the many hooks available on React which you can use to improve your code by enhancing the flexibility and reusability of your React components and make it easier to read, write and maintain your code.

Thank You and Good Luck!!!