Understanding Rendering and Rerendering in React Apps: How They Work and How to Optimize Them

When we create applications in React, we often come across the terms rendering and re-rendering components. Although this may seem simple at first glance, things get interesting when different state management systems like useState, Redux, or when we insert lifecycle hooks like useEffect are involved. If you want your application to be fast and efficient, understanding these processes is key.

What is Rendering?

Rendering is the process by which React displays your user interface (UI) on the screen, based on state or props. When your component is rendered for the first time, it is called the first render.

How Does Initial Render Work?

When a component is first "mounted" to the DOM, here's what happens:

1. State initialization:
Whether you use useState, props or Redux, the initial state of the component is created.

2. Render function:
React loops through the JSX code and generates a virtual DOM based on the current state.

3. Creates a virtual DOM (Virtual DOM) for the current state of the component.

4. Comparing (diffing):
The virtual DOM is compared to the real DOM (since it is the first render, all elements will be fully rendered).

5. Display:
The component is displayed on the screen.
Once the component is rendered, the next challenge is to render it.

Re-rendering: When and Why?

Rerendering happens every time the state or props change. Did you click the button that changes the number on the screen? Changed a value in the Redux store? All of those actions can cause React to render the component again, and that's where rerendering comes in.

How Does Rerendering Work?

State change detection:

• With useState, when you call setState, React knows it needs to update the component.

• With Redux, when a value in the store changes, every component associated with that part of the state is re-rendered.

Render trigger:

When state changes, React creates a new virtual DOM based on that change.

Comparing (diffing):

• React compares the new virtual DOM with the old one and calculates what changes to apply. This is one way React optimizes rendering.

View changes:

• After the changes are calculated, React applies them to the actual DOM. Thus, only the changed parts of the page are displayed again.

Which Components Are Rendered?

Not all components are affected by every change. React rerenders only those components that:

Use local states:
If you use useState, the component is rerendered every time setState.

is called

Use Redux state:
If your component depends on Redux state (via useSelector or connect), it will be re-rendered when that part of the state changes.

Use props:
If the props value changes, the component is re-rendered with the new values.

Optimization of Rendering

Of course, it's not always ideal to needlessly re-render all components. If we want the application to work quickly and efficiently, here are some optimization techniques:

1. Memoization of Components
React offers functionality for component memoization via React.memo. If your component doesn't depend on props or state changes, you can "remember" it, so it will re-render only when the relevant values ​​change.

Example:

const MemoizedComponent = React.memo(MyComponent);

2. Memorization of Functions and Values

To avoid recreating functions or values ​​on every render, use useCallback to memoize functions and useMemo to memoize values.

• useCallback allows you to memoize a function and prevent it from being recreated until the dependencies change.

• useMemo memoizes the result of the function, so it is not recomputed on each render.

Example:

const increment = useCallback(() => {
  setCount(prevCount => prevCount + 1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. Redux Optimization

If you use Redux, you can further optimize your application with memoized selectors such as reselect. This allows to avoid re-rendering components that are not affected by the state change.

Lifecycle Hook-ovi i Rerenderovanje

U klasičnim React klasama, koristili smo shouldComponentUpdate da kontrolišemo kada će se komponenta ponovo renderovati. U funkcionalnim komponentama, ovaj koncept se može simulirati pomoću useEffect i memoizacije.

Zaključak

Renderovanje i rerenderovanje su ključni za prikaz korisničkog interfejsa u React aplikacijama, ali pravilno razumevanje i optimizacija tih procesa može napraviti razliku između spore i super brze aplikacije. Ispravno korišćenje memoizacije, useCallback, useMemo, kao i pažljivo rukovanje Redux-om, pomaže da izbegnemo nepotrebne re-rendere i održimo naše aplikacije brzim i responzivnim.

Primer Koda: Renderovanje i Rerenderovanje u Akciji
Evo primera komponente koja koristi useState, Redux i memoizaciju da optimizuje renderovanje:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onclick="{increment}">Increment</button>
      <button onclick="{()"> dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      </button>
    </div>
  );
};

Kao što vidimo, ovde se koristi kombinacija lokalnog state-a, Redux-a, memoizacije i useEffect hook-a da bi aplikacija bila što efikasnija.

The above is the detailed content of Understanding Rendering and Rerendering in React Apps: How They Work and How to Optimize Them. For more information, please follow other related articles on the PHP Chinese website!