In the realm of web development, performance isn't just a feature; it's a fundamental requirement. Users expect web applications to be fast, responsive, and seamless. While React provides a powerful and efficient way to build user interfaces, applications can still suffer from performance bottlenecks as they grow in complexity. Unnecessary re-renders, large initial bundle sizes, and inefficient component structures can lead to sluggish user experiences. Fortunately, React offers a suite of tools and techniques specifically designed to combat these issues. This article delves into key strategies for optimizing React applications, focusing on memoization techniques (`React.memo`, `useMemo`, `useCallback`), lazy loading components (`React.lazy` and `Suspense`), and approaches to analyze and reduce bundle size. This guide is aimed at intermediate to advanced developers looking to fine-tune their React applications for optimal performance.

## The Cost of Re-renders and the Power of Memoization

React's core strength lies in its declarative nature and efficient reconciliation algorithm (the Virtual DOM). When a component's state or props change, React typically re-renders the component and its children to determine if the actual DOM needs updating. While React is fast, unnecessary re-renders, especially of complex component trees, can accumulate and degrade performance. Memoization is a powerful optimization technique used to prevent these unnecessary computations by caching the results of expensive function calls or component renders and returning the cached result when the same inputs occur again.

### Preventing Component Re-renders with `React.memo`

By default, functional components re-render whenever their parent component re-renders, even if their props haven't changed. `React.memo` is a higher-order component (HOC) that wraps your functional component and memoizes it. It performs a shallow comparison of the component's props. If the props haven't changed since the last render, React will skip re-rendering the component and reuse the last rendered result (Codementor, 2025; Dhiman, 2024).

```javascript
import React from 'react';

const MyComponent = ({ data }) => {
  console.log('Rendering MyComponent');
  // Potentially expensive rendering logic based on data
  return <div>{JSON.stringify(data)}</div>;
};

// Wrap the component with React.memo
const MemoizedComponent = React.memo(MyComponent);

// Usage in a parent component
function ParentComponent({ someProp }) {
  const [count, setCount] = useState(0);

  // Assume 'complexData' doesn't change often
  const complexData = { value: 'stable' }; 

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Increment Parent {count}</button>
      {/* 
        Without React.memo, MyComponent would re-render every time 
        ParentComponent re-renders (e.g., when 'count' changes).
        With React.memo, it only re-renders if 'complexData' changes.
      */}
      <MemoizedComponent data={complexData} />
    </div>
  );
}
```

It's crucial to remember that `React.memo` only performs a *shallow* comparison of props. If you pass complex objects or functions as props, ensure they maintain referential equality between renders if you don't want the memoized component to re-render unnecessarily. This leads us to `useMemo` and `useCallback`.

### Memoizing Values with `useMemo`

Sometimes, the performance bottleneck isn't the component re-render itself, but an expensive calculation *within* the component that runs on every render. `useMemo` is a hook that memoizes the result of a function call. It takes a function (that computes the value) and a dependency array. `useMemo` will only recompute the memoized value when one of the dependencies has changed. This is useful for expensive calculations or for ensuring referential stability for objects passed as props to memoized children (Dhiman, 2024; TenxDeveloper, 2025).

```javascript
import React, { useState, useMemo } from 'react';

function DataProcessor({ rawData }) {
  // Assume processData is computationally expensive
  const processData = (data) => {
    console.log('Performing expensive calculation...');
    // ... complex logic ...
    return data.map(item => item * 2); // Example transformation
  };

  // Memoize the result of processData
  // It only recalculates if 'rawData' changes
  const processedData = useMemo(() => processData(rawData), [rawData]);

  return (
    <div>
      <h2>Processed Data:</h2>
      <ul>
        {processedData.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}
```

By using `useMemo`, the expensive `processData` function is only called when `rawData` actually changes, not on every render of `DataProcessor` caused by its parent.

### Memoizing Functions with `useCallback`

When passing callback functions as props to child components optimized with `React.memo`, you might encounter unnecessary re-renders. This is because, in JavaScript, functions are objects, and a new function instance is typically created on every render of the parent component. Even if the function definition is identical, the reference changes, causing the shallow prop comparison in `React.memo` to fail. `useCallback` solves this by returning a memoized version of the callback function that only changes if one of its dependencies has changed (Dhiman, 2024; TenxDeveloper, 2025).

```javascript
import React, { useState, useCallback } from 'react';

const MemoizedButton = React.memo(({ onClick, label }) => {
  console.log(`Rendering Button: ${label}`);
  return <button onClick={onClick}>{label}</button>;
});

function ParentToolbar() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

  // Without useCallback, handleClick would be a new function on every render
  // causing MemoizedButton to re-render even when only 'otherState' changes.
  // const handleClick = () => { 
  //   console.log('Button clicked!');
  //   setCount(c => c + 1); 
  // };

  // With useCallback, handleClick reference is stable as long as dependencies ([]) don't change
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
    setCount(c => c + 1); // Note: using functional update form avoids dependency on 'count'
  }, []); // Empty dependency array means the function is created once

  return (
    <div>
      <button onClick={() => setOtherState(s => !s)}>Toggle Other State</button>
      <p>Count: {count}</p>
      <MemoizedButton onClick={handleClick} label="Increment Count" />
    </div>
  );
}
```

Using `useCallback` ensures that `MemoizedButton` only re-renders when its `label` prop changes, not every time `ParentToolbar` re-renders due to `otherState` changing.

**When to Memoize?** While memoization is powerful, overuse can add unnecessary complexity and memory overhead. Apply `React.memo`, `useMemo`, and `useCallback` strategically, primarily when: 
1. Components are pure (render the same output for the same props).
2. Components render often with the same props.
3. Components involve expensive calculations.
4. You need to maintain referential stability for props passed to memoized children.
Use profiling tools (like the React DevTools Profiler) to identify actual performance bottlenecks before applying memoization extensively.

## Reducing Initial Load Time with Lazy Loading

As React applications grow, their JavaScript bundle size tends to increase. Large bundles can significantly impact the initial load time, especially on slower networks or less powerful devices. Code splitting is a technique supported by bundlers like Webpack and Rollup, which involves splitting your code into smaller chunks that can be loaded on demand, rather than downloading the entire application upfront. React provides built-in support for code splitting via `React.lazy` and `Suspense` (Codementor, 2025; TenxDeveloper, 2025).

### `React.lazy` and `Suspense`

`React.lazy` lets you render a dynamically imported component as a regular component. It takes a function that must call a dynamic `import()`. This returns a Promise which resolves to a module with a `default` export containing a React component.

```javascript
import React, { Suspense, useState } from 'react';

// Dynamically import the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  const [showComponent, setShowComponent] = useState(false);

  return (
    <div>
      <h1>My App</h1>
      <button onClick={() => setShowComponent(true)}>Load Component</button>

      {/* Suspense provides a fallback UI while the lazy component loads */}
      <Suspense fallback={<div>Loading...</div>}>
        {showComponent && <LazyLoadedComponent />}
      </Suspense>
    </div>
  );
}

// ./LazyLoadedComponent.js (Example)
import React from 'react';

const LazyLoadedComponent = () => {
  return <h2>This component was loaded lazily!</h2>;
};

export default LazyLoadedComponent;
```

The `Suspense` component wraps the lazy component. Its `fallback` prop accepts any React elements to render while the lazy component is loading (e.g., a spinner or skeleton screen). You can place `Suspense` anywhere above the lazy component in the tree. It's common to use `React.lazy` for route-based code splitting, loading components associated with specific pages only when the user navigates to them.

## Analyzing and Optimizing Bundle Size

Beyond lazy loading, actively analyzing and reducing your application's bundle size is crucial for performance. Large bundles directly translate to longer download and parse times.

### Bundle Analysis Tools

Tools like `webpack-bundle-analyzer` or `source-map-explorer` can generate interactive visualizations of your bundle contents. These tools help you identify: 
*   Which dependencies contribute most to the bundle size.
*   Duplicate modules included in different chunks.
*   Large assets or components that could be optimized or code-split.

Running these analyzers regularly can reveal unexpected bloat.

### Dependency Optimization

Carefully evaluate your dependencies (Codementor, 2025). 
*   **Tree Shaking:** Ensure your bundler's tree shaking is configured correctly (usually enabled by default in production mode) to eliminate unused code from your dependencies.
*   **Targeted Imports:** Import only the specific functions or components you need from libraries like Lodash or Material UI, rather than importing the entire library (e.g., `import Button from '@mui/material/Button';` instead of `import { Button } from '@mui/material';`).
*   **Smaller Alternatives:** Consider lighter alternatives for heavy libraries if you only use a small subset of their functionality (e.g., using `date-fns` instead of `Moment.js` if localization isn't a primary concern).
*   **Plugin Optimization:** Use plugins like `moment-locales-webpack-plugin` or `lodash-webpack-plugin` to automatically strip unused parts of specific libraries (Codementor, 2025).

### Production Builds

Always deploy the production build of your React application. Bundlers like Webpack perform numerous optimizations in production mode, including minification, dead code elimination, and setting `process.env.NODE_ENV` to `'production'`, which disables development-only checks and warnings in React and other libraries (Codementor, 2025).

## Conclusion: A Continuous Process

Optimizing React application performance is not a one-time task but an ongoing process. Techniques like memoization (`React.memo`, `useMemo`, `useCallback`) help prevent unnecessary re-renders and computations, while lazy loading (`React.lazy`, `Suspense`) and bundle analysis improve initial load times. By understanding these techniques and using profiling tools to identify bottlenecks, developers can build React applications that are not only feature-rich but also exceptionally fast and responsive, delivering a superior user experience.

## References

*   Codementor. (2025, February 14). *21 Performance Optimization Techniques for React Apps*. Codementor Blog. Retrieved from https://www.codementor.io/blog/react-optimization-5wiwjnf9hj
*   Dhiman, R. (2024, October 24). *React Performance Optimization Techniques: Memoization, Lazy Loading, and More*. Medium. Retrieved from https://rajeshdhiman.medium.com/react-performance-optimization-techniques-memoization-lazy-loading-and-more-d1d9ddefca84
*   TenxDeveloper. (2025, March 18). *Optimizing React Application Performance with Memoization and Code Splitting*. TenxDeveloper Blog. Retrieved from https://www.tenxdeveloper.com/blog/optimizing-react-performance-memoization-code-splitting
*   React Team. (n.d.). *Optimizing Performance*. React Documentation. Retrieved from https://react.dev/learn/optimizing-performance


In the realm of web development, performance isn't just a feature; it's a fundamental requirement....

Optimizing React Performance: Memoization, Lazy Loading, and Bundle Analysis

Nael M. Awadallah

React Hooks revolutionized how developers write functional components, offering a way to manage state and side effects without relying on class components. Introduced in React 16.8, Hooks like `useState` and `useEffect` have become fundamental building blocks for modern React applications. However, while powerful, their apparent simplicity can sometimes mask nuances that lead to common pitfalls, especially for developers new to Hooks or migrating from class-based patterns. This article aims to provide a comprehensive guide for beginner and intermediate developers, diving deep into the core concepts, common patterns, best practices, and potential mistakes associated with `useState` and `useEffect`, empowering you to write cleaner, more efficient, and bug-free React code.

## The Power of `useState`: Managing Component State

At its core, `useState` is the hook that allows functional components to hold and manage their own local state. Before Hooks, state management was exclusive to class components. `useState` democratized this capability, making functional components truly first-class citizens for building dynamic user interfaces. The syntax is straightforward: it takes an initial state value as an argument and returns an array containing two elements: the current state value and a function to update that value.

```javascript
import React, { useState } from 'react';

function Counter() {
  // Initialize state: 'count' holds the current value (starts at 0)
  // 'setCount' is the function to update the 'count' state
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

This simple example illustrates the basic usage, but the real challenges often arise in more complex scenarios. Let's explore common mistakes and best practices to navigate these effectively.

### Mistake 1: Incorrect State Initialization

One frequent error, particularly for beginners, is initializing state with an incorrect data type or value, especially when the state is expected to be populated later, perhaps by an API call. `useState` allows any initial value, but if your component's rendering logic relies on a specific structure (like an object with certain properties), initializing with `undefined`, `null`, or an empty value can cause runtime errors when the component tries to access properties that don't exist yet (Refine, 2024).

Consider a component expecting a `user` object:

```javascript
// Incorrect Initialization
const [user, setUser] = useState(); // Initial state is undefined

// In the render:
return (
  <div>
    <p>Name: {user.name}</p> {/* This will throw an error initially */}
  </div>
);
```

This code will crash on the initial render because `user` is `undefined`, and you cannot access `undefined.name`. The best practice is to initialize the state with the expected data type, even if it's empty or contains default values.

```javascript
// Correct Initialization (Empty Object)
const [user, setUser] = useState({});

// Even better: Initialize with expected structure
const [user, setUser] = useState({ name: '', bio: '', avatarUrl: '' });

// In the render (using optional chaining for safety):
return (
  <div>
    <p>Name: {user?.name || 'Loading...'}</p>
    <p>Bio: {user?.bio || 'N/A'}</p>
  </div>
);
```

Initializing with the correct shape prevents initial render errors and makes the component's expected state structure clearer (Refine, 2024).

### Mistake 2: Direct State Modification

A fundamental principle in React is that state is immutable. You should never modify state variables directly. `useState` provides a setter function (like `setCount` or `setUser`) for a reason: calling this function is what signals React to re-render the component with the updated state. Directly mutating an object or array held in state bypasses this mechanism, meaning React won't detect the change, and your UI won't update (Guler, 2024).

```javascript
const [user, setUser] = useState({ name: 'Alice', age: 30 });

// Incorrect: Direct mutation
const handleAgeIncrement = () => {
  user.age = user.age + 1; // WRONG! React won't re-render.
  setUser(user); // Even calling setUser with the mutated object might not work reliably.
};

// Correct: Using the setter with a new object
const handleAgeIncrementCorrect = () => {
  setUser({ ...user, age: user.age + 1 }); // Create a new object
};

// Correct for arrays (e.g., adding an item)
const [items, setItems] = useState(['apple', 'banana']);

const addItem = (newItem) => {
  // items.push(newItem); // WRONG! Direct mutation.
  setItems([...items, newItem]); // Correct: Create a new array
};
```

Always use the setter function provided by `useState` and pass it a *new* value (a new object, new array, new primitive value). For objects and arrays, use techniques like the spread syntax (`...`) or array methods that return new arrays (`map`, `filter`, `concat`, `slice`) to create updated copies instead of modifying the original state variable (Guler, 2024; Refine, 2024).

### Mistake 3: Incorrect Updates Based on Previous State

What happens when the new state value depends on the *previous* state value? A common example is incrementing a counter. You might be tempted to write `setCount(count + 1)`. While this often works, it can lead to subtle bugs, especially when state updates happen rapidly or are batched together by React.

React state updates can be asynchronous and batched for performance. This means that when you call `setCount(count + 1)` multiple times in the same event handler, the `count` variable might not have the latest value from the previous `setCount` call within that batch (Guler, 2024).

```javascript
const [count, setCount] = useState(0);

// Potentially Incorrect (if called rapidly or batched)
const incrementTwice = () => {
  setCount(count + 1); // Reads 'count' as 0 (example)
  setCount(count + 1); // Still reads 'count' as 0 in the same batch
  // Result: count becomes 1, not 2
};

// Correct: Using the Functional Update Form
const incrementTwiceCorrect = () => {
  setCount(prevCount => prevCount + 1); // Gets the guaranteed latest state
  setCount(prevCount => prevCount + 1); // Gets the guaranteed latest state after the first update
  // Result: count becomes 2
};
```

The correct approach is to use the 

functional update form of the setter function. Instead of passing the new value directly, you pass a function that receives the *previous* state as an argument and returns the *new* state. React guarantees that the `prevCount` value inside this function will be the most up-to-date state, resolving potential race conditions from batching (Guler, 2024).

### Mistake 4: Forgetting State Updates are Asynchronous

Related to the previous point, developers often forget that `setState` calls do not update the state immediately within the same function execution context. The update is scheduled, and the component will re-render later with the new state. Trying to access the state variable right after calling the setter function will yield the *old* value (Guler, 2024).

```javascript
const [value, setValue] = useState("initial");

const updateAndLog = () => {
  setValue("updated");
  console.log(value); // This will log "initial", not "updated"
};
```

If you need to perform an action *after* the state has been updated, the standard way is to use the `useEffect` hook, which we'll discuss next. `useEffect` can be configured to run specifically when a particular state variable changes.

### Mistake 5: Overusing `useState` for Complex State

While `useState` is perfect for simple state values (strings, numbers, booleans) or even moderately complex objects, using multiple `useState` calls for related pieces of state that often change together can make the component logic verbose and harder to manage. Similarly, managing deeply nested objects with `useState` can become cumbersome due to the need to create new nested objects/arrays for every update (Guler, 2024; Refine, 2024).

```javascript
// Potentially verbose for a complex form
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [address, setAddress] = useState("");
// ... and many more fields

// Alternative 1: Group related state into an object
const [formData, setFormData] = useState({ name: "", email: "", password: "", address: "" });

const handleInputChange = (event) => {
  const { name, value } = event.target;
  setFormData(prevData => ({ ...prevData, [name]: value }));
};

// Alternative 2: For very complex state logic or state transitions
// Consider using the useReducer hook (discussed briefly later)
```

Grouping related state into a single object managed by `useState` can often simplify the component. For state logic involving multiple sub-values or complex transitions (like state machines), the `useReducer` hook might be a more suitable and scalable alternative (Guler, 2024).

## Taming Side Effects with `useEffect`

While `useState` handles the *what* (the data) of your component's state, `useEffect` handles the *when* and *how* of interacting with the world outside your component – performing side effects. Side effects include operations like fetching data from an API, setting up subscriptions (e.g., to WebSockets or browser events), manually manipulating the DOM (though generally discouraged in React), setting timers, or logging.

The `useEffect` hook accepts two arguments: a function containing the side effect logic (the 

effect function") and an optional dependency array.

```javascript
import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // --- Effect Function --- 
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
        setError(null);
      } catch (e) {
        setError(e.message);
        setData(null);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
    // --- End Effect Function ---

    // Optional: Cleanup function (explained later)
    return () => {
      // Cleanup logic if needed (e.g., abort fetch)
    };
  }, []); // <-- Dependency Array

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      {/* Render the fetched data */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
```

The crucial part of `useEffect` is the dependency array. It controls *when* the effect function runs after the initial render.

### Understanding the Dependency Array

*   **No Dependency Array (Omitted):** If you omit the dependency array entirely, the effect function will run *after every single render* of the component. This is often inefficient and can lead to performance issues or infinite loops if the effect itself triggers a state update.

    ```javascript
    useEffect(() => {
      // Runs after every render
      console.log('Component rendered or updated');
    });
    ```

*   **Empty Dependency Array (`[]`):** This tells React to run the effect function *only once*, after the initial render. This is ideal for setup tasks like fetching initial data, setting up subscriptions that don't depend on props or state, or adding global event listeners.

    ```javascript
    useEffect(() => {
      // Runs only once after the initial render
      console.log('Component mounted');
      fetchInitialData();
    }, []);
    ```

*   **Dependency Array with Values (`[prop1, stateValue]`):** The effect function will run after the initial render *and* after any subsequent render where any value listed in the dependency array has changed. React performs a shallow comparison of the dependency values between renders. This is the most common use case, allowing effects to re-run when relevant data changes.

    ```javascript
    useEffect(() => {
      // Runs initially and whenever userId changes
      console.log(`Fetching data for user: ${userId}`);
      fetchUserData(userId);
    }, [userId]); // Dependency: userId prop or state
    ```

### The Cleanup Function

Many side effects require cleanup to prevent memory leaks or unexpected behavior. For example, if you set up a subscription or a timer, you need to clear it when the component unmounts or before the effect runs again. `useEffect` handles this elegantly: if the effect function returns another function, React will run this returned function (the cleanup function) before executing the effect next time (if dependencies change) or when the component unmounts.

```javascript
useEffect(() => {
  const handleResize = () => {
    console.log('Window resized:', window.innerWidth);
  };

  // Setup: Add event listener
  window.addEventListener('resize', handleResize);
  console.log('Event listener added');

  // Cleanup: Return a function to remove the listener
  return () => {
    window.removeEventListener('resize', handleResize);
    console.log('Event listener removed');
  };
}, []); // Empty array: setup on mount, cleanup on unmount
```

### Mistake 6: Missing Dependencies

The React ESLint plugin (`eslint-plugin-react-hooks`) includes a rule (`react-hooks/exhaustive-deps`) that is crucial for catching a common `useEffect` mistake: forgetting to include all reactive values (props, state, functions defined in the component) used inside the effect function in the dependency array. Omitting a dependency can lead to the effect running with stale data (stale closures), as it won't re-run when that dependency changes (Guler, 2024).

```javascript
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Incorrect: userId is used but not listed in dependencies
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, []); // <-- Missing userId dependency!

  // Correct:
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // <-- Correctly includes userId

  // ... render user
}
```

Always trust and fix the warnings from the `exhaustive-deps` ESLint rule. If including a dependency causes unwanted re-runs (e.g., a function reference changing on every render), you might need to memoize the function using `useCallback` or restructure your code.

### Mistake 7: Creating Infinite Loops

An effect can inadvertently cause an infinite loop if it updates a state variable that is also listed in its dependency array, without proper conditioning. Each state update triggers a re-render, which causes the effect to run again, update the state again, and so on.

```javascript
const [count, setCount] = useState(0);

useEffect(() => {
  // Incorrect: Causes infinite loop
  // setCount(count + 1); 

  // Correct: Only update if a condition is met
  if (count < 10) {
     // Example condition
     // Or perhaps the update should be triggered by an event, not the effect itself
  }
}, [count]); // Depends on count
```

Ensure your effects only trigger state updates when necessary, often based on conditions or events, rather than unconditionally updating a dependency within the effect.

## Conclusion: Embracing Hooks Mindfully

`useState` and `useEffect` are powerful tools that form the backbone of state management and side effect handling in modern React functional components. While their basic usage is straightforward, mastering them involves understanding key principles like immutability, asynchronous updates, dependency management, and cleanup.

By being mindful of common pitfalls – such as incorrect initialization, direct state mutation, improper handling of previous state, forgetting the asynchronous nature of updates, overusing `useState` for complex scenarios, missing dependencies in `useEffect`, and creating infinite loops – you can leverage these hooks effectively. Always initialize state correctly, treat state as immutable, use functional updates when relying on previous state, manage dependencies carefully with `useEffect`, and implement cleanup logic when necessary. Adhering to these best practices will lead to more predictable, maintainable, and performant React applications.

## References

*   Guler, S. (2024). *Common Mistakes and Best Practices with React’s useState Hook*. Medium. Retrieved from https://selcuk00.medium.com/common-mistakes-and-best-practices-with-reacts-usestate-hook-cd25ce2991ee
*   Refine. (2024). *5 Most Common useState Mistakes React Developers Often Make*. Refine Blog. Retrieved from https://refine.dev/blog/common-usestate-mistakes-and-how-to-avoid/
*   React Team. (n.d.). *Using the State Hook*. React Documentation. Retrieved from https://react.dev/reference/react/useState
*   React Team. (n.d.). *Using the Effect Hook*. React Documentation. Retrieved from https://react.dev/reference/react/useEffect



React Hooks revolutionized how developers write functional components, offering a way to manage state...

My Articles

Optimizing React Performance: Memoization, Lazy Loading, and Bundle Analysis

Mastering React Hooks: A Deep Dive into useState and useEffect