DEV Community: Nael M. Awadallah

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

Nael M. Awadallah — Thu, 29 May 2025 22:35:09 +0000

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).

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).

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).

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:

Components are pure (render the same output for the same props).
Components render often with the same props.
Components involve expensive calculations.
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.

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

Mastering React Hooks: A Deep Dive into useState and useEffect

Nael M. Awadallah — Thu, 29 May 2025 22:33:31 +0000

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.

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:

// 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.

// 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).

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).

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).

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).

// 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.

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.
```
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.
```
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.
```
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.

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).

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.

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

DEV Community: Nael M. Awadallah

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

The Cost of Re-renders and the Power of Memoization

Preventing Component Re-renders with React.memo

Memoizing Values with useMemo

Memoizing Functions with useCallback

Reducing Initial Load Time with Lazy Loading

React.lazy and Suspense

Analyzing and Optimizing Bundle Size

Bundle Analysis Tools

Dependency Optimization

Production Builds

Conclusion: A Continuous Process

References

Mastering React Hooks: A Deep Dive into useState and useEffect

The Power of useState: Managing Component State

Mistake 1: Incorrect State Initialization

Mistake 2: Direct State Modification

Mistake 3: Incorrect Updates Based on Previous State

Mistake 4: Forgetting State Updates are Asynchronous

Mistake 5: Overusing useState for Complex State

Taming Side Effects with useEffect

Understanding the Dependency Array

The Cleanup Function

Mistake 6: Missing Dependencies

Mistake 7: Creating Infinite Loops

Conclusion: Embracing Hooks Mindfully

References

Preventing Component Re-renders with `React.memo`

Memoizing Values with `useMemo`

Memoizing Functions with `useCallback`

`React.lazy` and `Suspense`

The Power of `useState`: Managing Component State

Mistake 5: Overusing `useState` for Complex State

Taming Side Effects with `useEffect`