React Hooks and Benefits

React

As a front-end JavaScript library for building interfaces based on components, React has gained popularity among front-end developers. It was launched by Facebook in 2013 and is now maintained by Meta. React is open-source and its main use case is the development of single-page web applications with a focus on the user interface and rendering components to the DOM.

React applications rely on libraries for routing and other client-side functionality. A key advantage of React is that it only re-renders those parts of a page that have changed thus avoiding unnecessary re-rendering of unchanged DOM elements.

Key Features

Declarative
Following the declarative programming paradigm, in React developers design views for each state of an application, which is then updated and components rendered as data changes. Compared to imperative programming, the focus is on “what” should be done and how the final page should look like, as opposed to “how" it is done step-by-step.

Components
The code in React consists of components, which are modular and reusable entities. Applications usually have multiple layers of components and they are rendered to a so-called root element in the DOM. During rendering of a component values are passed between components through properties a.k.a. props. Values internal to a component are referred to as state.

React Hooks
Available since React 16.8 (2019), React Hooks are functions that allow developers to hook into React state and life cycle features from function components. Importantly, Hooks let developers use features of React without having to use classes. This is considered a big benefit, because programmers need to rely less on class components.

Class Components
Classes behave similar as functional components. However, instead of using Hooks to manage state and lifecycle events, they use lifecycle methods on React.Component base classes.

Routing
Since React does not have any built-in support for routing, third-party libraries can be used to deal with routing. This allows the developer to easily define routes, manage navigation and handle URL changes.

Virtual DOM
The Virtual Document Object Model (DOM) is an important feature, as React uses an internal data-structure, computes the resulting differences, and updates the displayed DOM efficiently. This allows the developer to write code as if the entire page is rendered on each change while React only renders components that actually change. This provides performance enhancement.

React Hooks

As mentioned earlier, Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Reference:
React Docs

useState
useState is a React Hook that lets you add a state variable to your component.

Reference:
useState

Example

import { useState } from ‘react’;
function MyComponent() {
const [age, setAge] = useState(28);
const [name, setName] = useState('Taylor’);
const [todos, setTodos] = useState(() => createTodos());
// …

The convention is to name state variables like [something, setSomething] using array destructuring.

Parameters include initialState, which is the value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial rendering.

useState returns an array with exactly two values:

1. The current state. During the first render, it will match the initialState you have passed.
2. The set function that lets you update the state to a different value and trigger a re-render.

useEffect
useEffect is a React Hook that lets you synchronize a component with an external system.

Example
useEffect(setup, dependencies)

It is called at the top level of your component to declare an Effect.

setup is the function with the Effect’s logic. The setup function may also optionally return a cleanup function. When your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function with the old values, and then run your setup function with the new values.

Dependencies are optional and this is a list of all reactive values referenced inside of the setup code. Reactive values include props, state, and all the variables and functions declared directly inside your component body.

Key Takeaways

One key benefit of React is that it uses JavaScript, which is one of the world’s most popular programming languages. React is easy to use, generally easy to learn, and improves your web applications’ performance and interoperability.