Image credit: Unsplash - Behnam Norouzi
In the present era, it has become imperative to create not just fully functional websites but also user interfaces that enhance the user experience. This is where React comes in. React is a free and open-source JavaScript library used to build user interfaces(UI) for websites and web applications. It was created by Meta (formerly Facebook) to make it easier to build dynamic and interactive web pages.
At the core of React’s architecture is the concept of components—which are small, reusable pieces of the UI . Think of a component as a distinct part of the UI. Each component is like a building block that can be combined to create complex user interfaces. This approach makes the code more organized, easier to manage, and faster to update.By building these components, developers can create modular and maintainable applications, reducing redundancy and improving code organization.
Originally, React was introduced to streamline the development of single-page applications (SPAs) by enabling seamless updates to the UI without requiring full-page reloads. Over time, its ecosystem has expanded significantly, with frameworks like Next.js, Remix.js and Gatsby providing additional capabilities such as server-side rendering (SSR) and static site generation (SSG). Today, React serves as a powerful foundation for building not only SPAs but also complex, scalable web applications with rich user experiences.
Need for State Management
Modern User Interfaces are highly interactive whether they be user interactions, real time data updates or API calls. In order to keep the UI accurate and current, it is imperative that it reflects the latest data. For instance, In a page showing the score of a sports game, the changes in scores have to be updated real time in the UI. This begs the question – How do we know when there is a change in the data corresponding to a component?
The answer to this lies in the concept of “state”. In simple terms, state represents the current condition or data of a component at a given moment. It can store information like whether a user is logged in, which page they are viewing, or the content of a form. When this data changes, React updates the state, which then triggers the component to re-render with the new information. This automatic updating is what makes React dynamic and interactive. In fact, the name “React” comes from its ability to react to state changes efficiently.
Without a structured way to manage state, applications can become unpredictable, leading to inconsistent UI behavior and unnecessary re-renders. Imagine a simple counter app—when a button is clicked, the displayed number must change while ensuring other parts of the UI remain unaffected. Now, consider a more complex example, such as an e-commerce website. The shopping cart, user authentication, and product listings all require state management to keep different parts of the UI updated properly. Without a good state management system, developers would have to manually update the DOM and handle inconsistencies, leading to spaghetti code and a frustrating development experience.
State Management in React
The core purpose of react library has been to provide a way to manage state and side effects of a component. When React was first introduced, class components were the only way to manage component-level state. Developers used the this.state object to store dynamic data and this.setState() to update it. While this approach worked, it came with a fair share of challenges, especially as applications grew in complexity.
Example:
class UserProfile extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',isEditing: false
};
}
handleChange = (e) => {
this.setState({ username: e.target.value });
}
render() {
return (
<input
value={this.state.username}
onChange={this.handleChange}
/>
);
}
}
At first glance, this component seems straightforward. However, as the application scales, managing state in class components becomes increasingly difficult. Developers had to rely on lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount to handle side effects such as fetching data, managing event listeners, or performing cleanups. This led to code that was verbose, difficult to read, and hard to maintain.
The Shift to Functional Components
To simplify component structure, functional components gained popularity. Initially, they were stateless and purely presentational, meaning they couldn’t manage state or lifecycle methods. Developers preferred them because they were easier to write, reusable, and more readable than class components.
Here’s an example of the same User Profile component written as a functional component:
const UserProfile = ({ username, onChange }) => {
return <input value={username} onChange={onChange} />;
};
While this is much cleaner, the problem remains—functional components couldn’t have their own state. If stateful logic was needed, developers had to use class components, leading to an inconsistent codebase where some components were functional while others were class-based.
This limitation led to a crucial question:
How can functional components manage state without converting back to class components?
React Hooks
To address the above question and bridge the gap between class and functional components, hooks were introduced from version 16.8 onwards. Hooks allowed the functional components to have state and functional features without needing classes.
For instance, the above User Profile component can manage its own state using the useState() hook:-
import { useState } from "react";
const UserProfile = () => {
const [username, setUsername] = useState("");
return (
<input
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
);
};
export default UserProfile
useEffect: Managing Side Effects in Functional Components
The useEffect hook is responsible for handling side effects in React components, such as data fetching, subscriptions, and manually manipulating the DOM. Unlike lifecycle methods in class components, useEffect allows developers to define effects in a more readable and reusable manner.
You can control when useEffect runs by providing a dependency array. If the array is empty, the effect runs only once when the component mounts. If dependencies are included, useEffect re-executes whenever those dependencies change. This helps in optimizing resource usage and ensuring efficient updates.
Additionally, useEffect allows cleanup by returning a function inside the effect. This is useful for removing event listeners, canceling API requests, or clearing timeouts when a component unmounts, preventing memory leaks.
Example:
import { useEffect, useState } from 'react';
const ClickCounter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]); // Runs whenever `count` changes
return <button onClick={() => setCount(count + 1)}>Increment</button>;
}
export default ClickCounter;
useMemo: Optimizing Expensive Calculations
useMemo is used to optimize performance by memoizing (caching) expensive calculations. Without useMemo, a function inside a component re-executes every time the component renders, even if the values remain unchanged. useMemo ensures that the function only recomputes when its dependencies change, preventing unnecessary calculations and improving efficiency.
This is particularly useful when working with large datasets, filtering operations, or complex mathematical calculations that could slow down the UI if recalculated frequently.
Example:
import { useMemo, useState } from 'react';
const NumberSquare = () => {
const [number, setNumber] = useState(0);
const squaredValue = useMemo(() => {
console.log('Computing square...');
return number * number;
}, [number]);
return (
<div>
<input type="number" value={number} onChange={(e) => setNumber(parseInt(e.target.value) || 0)} />
<p>Squared Value: {squaredValue}</p>
</div>
);
}
export default NumberSquare
useCallback: Preventing Unnecessary Function Recreation
useCallback is similar to useMemo, but instead of caching a computed value, it caches a function reference. In React, functions are re-created on every render, which can cause unnecessary re-renders of child components when passed as props. useCallback ensures that a function remains the same between renders unless its dependencies change, improving performance.
This is particularly useful when passing event handlers to child components, preventing unnecessary re-renders when the parent component updates.
Example:
import { useCallback, useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((prevCount) => prevCount + 1);
}, []); // Function reference stays the same across renders
return <button onClick={increment}>Increment</button>;
}
export default Counter
Conclusion
By mastering and correctly applying these hooks, you can optimize component rendering, prevent unnecessary re-renders, and enhance overall application performance. Understanding when and how to use useEffect, useMemo, and useCallback in real-world scenarios will help you write cleaner, more efficient React code. Keep experimenting with these hooks in practical applications to deepen your understanding and take your React development skills to the next level.
