Optimizing Performance with React

This is a Next.js project bootstrapped with create-next-app.

Build Setup ⚙️

First, install dependencies and run the development application:

npm install
# or
yarn

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the application.

Second, run the fake API:

npm run server
# or
yarn server

Open http://localhost:3333/products with your browser to see the result.

---

Anotations 📝

Optimizing Performance

Memo 🍩

When use:

• Pure Functional Components
• Renders too often
• Re-renders with the same props
• Memo works fine with medium or big size components

useMemo 🍩

When use:

• Used to memorize a value, a result
• Heavy calculations
• Referential equality (when we pass information to a child component)

useCallback 🍩

When use:

• Used only to memorize a function

Data formatting 🍩

When use:

• Used at the time you fetch the information, not the time the information will be displayed

Code-Splitting 🍩

When use:

• Used at the time you need to import a file, a component or a function just at the moment we need to use it

Virtualization 🍩

When use:

• Allows only items that are visible in the user's browser to be viewed on screen

---

Made with 💜 by João Paulo Fricks