Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dannycahyo/memo-callback-mastery
https://github.com/dannycahyo/memo-callback-mastery
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/dannycahyo/memo-callback-mastery
- Owner: dannycahyo
- Created: 2023-08-25T13:38:51.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-09T01:02:07.000Z (11 months ago)
- Last Synced: 2023-12-09T02:22:42.357Z (11 months ago)
- Language: TypeScript
- Size: 323 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Memo Callback Mastery
A project demonstrating the optimal use cases for `useMemo` and `useCallback` hooks in React.
## Table of Contents
- [Introduction](#introduction)
- [Installation](#installation)
- [Usage](#usage)
- [Features](#features)
- [Best Practices](#best-practices)
- [Presentation Slides](#presentation-slides)
## Introduction
In React, optimizing performance is crucial for creating smooth and responsive applications. The `useMemo` and `useCallback` hooks are powerful tools that can help optimize components by preventing unnecessary re-renders and unnecessary function re-creations. However, their effectiveness lies in their strategic application.
One phenomenon that has emerged is the tendency for developers to indiscriminately apply `useMemo` and `useCallback` everywhere, sometimes without a clear understanding of their appropriate use cases. This overuse can lead to code complexity and even degrade performance, as not every scenario benefits from memoization.
This project aims to address this phenomenon by providing a clear overview of both appropriate and unnecessary uses of `useMemo` and `useCallback`. By exploring real-world scenarios, developers can learn when to leverage these hooks for performance improvements and when to avoid their overuse.
Through a comprehensive exploration of different cases, this project seeks to guide developers toward making informed decisions about optimizing their React applications with `useMemo` and `useCallback`.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/your-username/memo-callback-mastery.git
```
2. Navigate to the project directory:
```bash
cd memo-callback-mastery
```
3. Install dependencies:
```bash
npm install
```
## Usage
Run the development server:
```bash
npm run dev
```
Open your browser and navigate to `http://127.0.0.1:5173/` to see the project in action.
## Features
**Branches**
1. **master**: This branch demonstrates the appropriate and optimal use cases of the useMemo and useCallback hooks. It showcases scenarios where these hooks can be used to enhance the performance of React components.
2. **unnecessary-memoization-examples**: This branch highlights some of the unnecessary and inappropriate usages of the useMemo and useCallback hooks. It illustrates scenarios where these hooks may be misused and lead to performance issues.
## Best Practices
Both useMemo and useCallback can be used for two main reasons:
1. Referential Equality: When dealing with props or values that need to maintain referential equality between renders, using useMemo and useCallback ensures that the same reference is preserved, preventing unnecessary re-renders or function re-creations.
2. Computationally Expensive Calculations: When a function's execution is computationally expensive and its result doesn't change frequently, using useMemo to memoize the result can optimize the component's rendering performance.
## Presentation Slides
The presentation slides for this project can be found in the `slides` directory from the root of the repository. To view and get the full experience of the slides, it's recommended to use the [Marp for VS Code extension](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode).