React Hooks

React Hooks are a feature in React that allow you to add state and other React features to function components. Hooks were introduced in React 16.8. Before the introduction of hooks, state and lifecycle logic had to be added to class components, but with hooks, you can use state and other React features in functional components.

The use of hooks results in cleaner, more concise, and reusable code. It also makes it easier to understand the behavior of a component, as all the logic is in one place rather than spread out across multiple class methods. Additionally, hooks allow you to write stateful logic that is independent of the rendering logic, making it easier to reuse and test.

In this article, we will explore three of the most common React Hooks: useState, useEffect and useContext

useState :

The useState hook is a built-in hook in React that allows you to easily add state to your components.

Let's take a look at a simple example to understand how useState works.

In this example, we import the useState hook from the react library and then use it within our functional component, Example. The useState hook takes an initial value as an argument, in this case 0, which represents the initial value of our state variable count.

The useState hook returns an array with two elements, the current state value and a function to update it. In this case, we destructure the array into two variables: count and setCount. The count variable holds the current value of our state and the setCount function allows us to update the value of our state.

Finally, within the return statement, we display the current value of count and a button that, when clicked, will increment the value of count by one using the setCount function.

When the user clicks the button, the setCount function is called and updates the value of count in our state. This causes React to re-render the component and display the updated value.

It's important to note that the setCount function does not modify the value of count directly. Instead, it tells React to re-render the component with the updated value. This is a key aspect of React's state management and ensures that state updates are always done in a controlled and predictable manner.

useEffect :

useEffect is a hook in React that allows you to run a function when a component is mounted, updated, or unmounted. It is a combination of componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods in class components. The main purpose of the useEffect hook is to handle side effects in functional components.

A side effect is any behavior or action that has an impact outside of the component itself, such as API calls, subscriptions, or updating the DOM. In React, side effects should always be performed in an effect hook.

Here's an example of how you might use useEffect to fetch data from an API and set it in state:

In this example, the useEffect hook is used to fetch data from an API and set it in state when the component is mounted. The hook takes two arguments: the first is a function that performs the side effect, and the second is an array of dependencies that determine when the effect should be re-run.

In this case, the second argument is an empty array, which means that the effect will only run once when the component is mounted. If you want the effect to re-run when a certain state or prop changes, you can include it in the dependencies array. For example, if you wanted the effect to re-run when data changes, you would write:

useEffect(() => {
  ...
}, [data]);        

It's important to be mindful of the dependencies you include in the array, as adding too many dependencies can lead to performance issues. If a dependency is not necessary for the effect to run, it's best to leave it out of the array.

Finally, it's important to return a cleanup function from the effect if it needs to perform any cleanup when the component is unmounted. For example, if you have a subscription in your effect, you should unsubscribe in the cleanup function to prevent memory leaks:

useEffect(() => {
  const subscription = ...;

  return () => {
    subscription.unsubscribe();
  };
}, []);        

useContext:

Context is a way to pass data through the component tree without having to pass props down manually at every level. In React, context is created using the React.createContext() function and is provided to the React tree using the Provider component. The data can then be accessed by any component within the tree using the useContext() hook.

The useContext() hook is used to access the data stored in a context object. The hook takes a single argument, which is the context object created using React.createContext().

Here's an example of how you can use the useContext() hook to access a context object:

In this example, we first create a context object using React.createContext(). The value of the context is then provided using the Provider component, which takes a single prop named value. The value of the context can then be accessed within any child component of the Provider using the useContext() hook.

In this example, the ChildComponent uses the useContext() hook to access the value of the context and displays it on the screen.

Providing a Default Value

When using the useContext() hook, it's a good idea to provide a default value in case the context has not yet been initialized. This can be done by passing a second argument to the useContext() hook:

const value = useContext(MyContext, defaultValue);        

In this example, defaultValue will be used as the value of the context if the context has not yet been initialized.

Conclusion:

React Hooks provide a flexible and efficient way to manage state and side effects in React components. The useState hook allows developers to add local state to their functional components, while the useEffect hook enables them to perform side effects like data fetching and component updates. The useContext hook provides a way to share data across multiple components without having to pass props down the component tree. These hooks make it easier to build complex and dynamic applications, improving code readability and reducing code duplication. Overall, React Hooks are a powerful tool that have significantly improved the way developers build applications with React.