One of the keys to building performant React applications is avoiding unnecessary re-renders. React's rendering engine is efficient, but it's still crucial to prevent re-renders where they aren't needed. In this post, we'll cover common mistakes and how to avoid them.
1. Memoizing Components Using React.memo
Memoization helps you skip re-renders when the component's props haven't changed. However, it's easy to misuse React.memo by not implementing a custom comparison function.
Incorrect Usage:
const MemoizedComponent = React.memo(MyComponent);
This only checks if the props reference has changed, which might not always be sufficient.
Correct Usage:
const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => { return prevProps.itemId === nextProps.itemId; });
Here, we use a custom comparison function that only triggers a re-render when the itemId prop changes.
2. Avoid Excessive Use of Inline Functions
Using inline functions inside JSX can lead to unnecessary re-renders as React treats a new function as a new prop on every render.
Incorrect Usage:
function ButtonComponent() { return <button onclick="{()"> handleClick()}>Click me</button>; }
This causes handleClick to be recreated on every render, leading to unnecessary re-renders.
Correct Usage:
import { useCallback } from 'react'; function ButtonComponent() { const handleClick = useCallback(() => { // Handle click logic }, []); return <button onclick="{handleClick}">Click me</button>; }
By using useCallback, we memoize the handleClick function, preventing unnecessary re-creation on each render.
3. Leveraging PureComponent
When working with class components, using React.PureComponent ensures that the component only re-renders if its props or state change. If you're using React.Component, it may lead to unnecessary re-renders.
Incorrect Usage:
class CardComponent extends React.Component { // Component logic }
Correct Usage:
class CardComponent extends React.PureComponent { // Component logic }
By extending React.PureComponent, React will shallowly compare props and state, avoiding needless re-renders.
4. Optimizing useSelector in Functional Components
When using useSelector from react-redux, it's important to select only the necessary slice of the state.
Incorrect Usage:
import { useSelector } from 'react-redux'; const DataComponent = () => { const globalState = useSelector((state) => state); // Render logic };
This will cause the component to re-render whenever any part of the state changes.
Correct Usage:
import { useSelector } from 'react-redux'; const DataComponent = () => { const selectedData = useSelector((state) => state.specificSlice); // Render logic based on specific slice };
By selecting only the necessary part of the state, you minimize re-renders.
5. Implementing shouldComponentUpdate in Class Components
For class components that don't extend PureComponent, manually implementing shouldComponentUpdate allows more granular control over when the component re-renders.
Incorrect Usage:
class ListItem extends React.Component { // Component logic }
This will re-render every time the parent component renders, even if the props and state haven't changed.
Correct Usage:
class ListItem extends React.Component { shouldComponentUpdate(nextProps, nextState) { return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value; } // Component logic }
By customizing shouldComponentUpdate, we ensure that the component only re-renders when the itemId prop or the value state changes.
Conclusion
By employing these techniques, you can significantly reduce unnecessary re-renders in your React applications, leading to better performance. Implementing memoization with React.memo, leveraging PureComponent, and fine-tuning shouldComponentUpdate are key strategies for optimizing your React components.
Understanding when and how to optimize rendering can greatly enhance user experience by providing faster and more responsive applications.
References:
- GeeksforGeeks. (2023). What is Memoization in React?
- Syncfusion. (2024). Memoization in React
- Hygraph. (2024). What is React Memo and How to Use it?
- Refine.dev. (2024). React Memo Guide with Examples
If you found this guide useful, please consider sharing it with others! ?
This blog provides an updated and comprehensive overview of avoiding unnecessary re-renders in React applications while incorporating best practices and changing variable names for clarity and relevance in modern web development practices.
Citations:
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-components-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo
Atas ialah kandungan terperinci Mengelakkan Paparan Semula yang Tidak Perlu dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.

Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.

Artikel ini akan membimbing anda untuk membuat karusel gambar mudah menggunakan perpustakaan jQuery. Kami akan menggunakan perpustakaan BXSlider, yang dibina di atas jQuery dan menyediakan banyak pilihan konfigurasi untuk menubuhkan karusel. Pada masa kini, Gambar Carousel telah menjadi ciri yang mesti ada di laman web - satu gambar lebih baik daripada seribu perkataan! Selepas membuat keputusan untuk menggunakan karusel gambar, soalan seterusnya adalah bagaimana untuk menciptanya. Pertama, anda perlu mengumpul gambar-gambar resolusi tinggi yang berkualiti tinggi. Seterusnya, anda perlu membuat karusel gambar menggunakan HTML dan beberapa kod JavaScript. Terdapat banyak perpustakaan di web yang dapat membantu anda membuat karusel dengan cara yang berbeza. Kami akan menggunakan Perpustakaan BXSlider Sumber Terbuka. Perpustakaan BXSlider menyokong reka bentuk responsif, jadi karusel yang dibina dengan perpustakaan ini dapat disesuaikan dengan mana -mana

Bawa kesan filem matriks ke halaman anda! Ini adalah plugin jQuery yang sejuk berdasarkan filem terkenal "The Matrix". Plugin mensimulasikan kesan aksara hijau klasik dalam filem, dan hanya pilih gambar dan plugin akan mengubahnya menjadi gambar gaya matriks yang diisi dengan aksara angka. Datang dan cuba, sangat menarik! Bagaimana ia berfungsi Plugin memuat imej ke kanvas dan membaca nilai piksel dan warna: data = ctx.getimagedata (x, y, settings.grainsize, settings.grainsize) .data Plugin dengan bijak membaca kawasan segi empat tepat gambar dan menggunakan jQuery untuk mengira warna purata setiap kawasan. Kemudian, gunakan

Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Dreamweaver Mac版
Alat pembangunan web visual

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.