React Hooks
Tags: react
Published: 2023-10-16 17:50:54

React is a free, open-source front-end JavaScript library that was created by Facebook. It was designed to build interactive user interfaces and web applications quickly and efficiently. Due to its quick and effective nature, React allows developers to build applications with significantly less code than would be required with vanilla JavaScript. 

When using React, developers generate their applications by creating components. Components are isolated and reusable pieces of code that come in two types: class components and functional components. Before React version 16.8, developers were only able to handle state and other React features using class components. When version 16.8 was created, however, Hooks were introduced.

React Hooks are JavaScript functions that allow you to isolate the reusable parts from a component. In other words, they allow you to “hook into” React state, context, and lifestyle features from function components. Before Hooks were created, developers had to use class components to utilize these features. Now, Hooks allows you to use React without classes. React version 18 has 15 Hooks that developers can utilize. Some of the most commonly used Hooks are useState, useEffect, useContext, and useReducer. 

<u>useState</u>

useState is a hook that allows you to add state to a component. State usually refers to data or properties that need to be tracked or updated in an application. useState accepts an initial state as an argument and returns an array with two values: the current state and a function designed to update the state. Whenever the setter function is called, the useState hook returns an updated state value. The setter function updates state by initiating a re-render of the component, which sets state to the updated value that was passed to the function. useState can store any type of value, from primitive data types like strings and numbers to complex data types like objects and functions.

<u>useEffect</u>

The useEffect hook allows you to carry out side effects in your components. A side effect is anything that causes change outside of the scope of the function being executed. Some examples of side effects are making network requests, accessing data from a database, and writing to the file system. useEffect tells React that the component in which it is initialized in needs to do something after render. The hook takes two arguments: a function and an optional dependency array. Without a dependency array, useEffect runs on every render. This means that after the initial render and after each successive re-render of a component, the function passed in as the first argument to useEffect will be called. If an empty array is passed in as the second argument, the useEffect function will only run after the first render. This is useful for when you want to run a side effect on page load and not have it run again. You can also pass props or state values to the dependency array. When this happens, useEffect will run after the initial render and also when the passed props or state values are updated. It will not, however, run when state is changed for a state value that is not passed into the dependency array.

useEffect also returns a cleanup function. While the cleanup function is not required, it can be helpful for side effects that require cleanup to reduce memory leaks. Examples of these types of side effects are timeouts, subscriptions, and event listeners. Generally, the cleanup function will be called by React after the component re-renders as a result of setting state and before the useEffect callback function is called. 

<u>useContext</u>

useContext allows you to read and subscribe to context from your component. In order to read and subscribe to context, it has to be created first using createContext. createContext allows you to create a context that components can provide or read. The useContext hook takes in the context that was created with createContext as a parameter, and it returns that context value for the calling component. The context value that will be returned from useContext is determined as the value given by the nearest context provider above the calling component in the tree. If there is no provider that matches this specification, then the returned value will be the default value that was passed to createContext. Since React automatically re-renders components that read context if it changes, the return value is always up to date.

<u>useReducer</u>

useReducer is a hook that is very similar to the useState hook, and it was made to help you manage complex state logic. Like useState, useReducer is used to store and update state. It accepts two arguments: a reducer function as the first argument, and the initial state as the second argument. The hook returns an array that contains the current state value and a dispatch function that lets you update the state to a different value and trigger a re-render.

While similar to useState, there are some things that make useReducer different. useState is better to use when managing simple state transformation, while useReducer is better for managing more complex state logic. Also, useReducer allows you to avoid passing down callback functions through different levels of your component. Instead, it lets you pass the dispatch function, which improves performance for components that trigger deep updates. useReducer is more ideal for larger applications with greater complexity when managing state changes across components.

The introduction of Hooks created a functional way to access features like state, context, and lifecycle methods. They make it easier for developers to manage component logic and state. They also allow developers to create reusable and modular code in a clear and straightforward manner. While only four Hooks were mentioned above, there are many different Hooks that can be utilized to make life easier for a developer.