/use-memo-callback-and-memo

This repository serves as a learning sandbox for exploring the optimization hooks provided by React, including `useMemo`, `useCallback`, and the usage of `React.memo`.

Primary LanguageJavaScript

Learning React Optimization Hooks and Memoization

This repository serves as a learning sandbox for exploring the optimization hooks provided by React, including useMemo, useCallback, and the usage of React.memo.

About

The code within this repository demonstrates practical examples and use cases for leveraging React's memoization techniques. Through simple components and scenarios, we aim to understand:

  • useMemo: Exploring memoization of values to prevent unnecessary recalculations and improve performance.
  • useCallback: Understanding the memoization of callback functions, optimizing component re-renders.
  • React.memo: Demonstrating the memoization of functional components to prevent unnecessary re-renders based on prop changes.

Usage

To run this project, follow these steps:

  1. Clone the repository:

    git clone https://github.com/sid10297/use-memo-callback-and-memo.git
    cd learning-react-optimization-hooks
  2. Install dependencies using Yarn:

    yarn
  3. Start the development server:

    yarn dev

Contributions

Contributions and suggestions for improvements are welcome! If you have insights, optimizations, or additional examples related to useMemo, useCallback, or React.memo, feel free to open a pull request or create an issue.