The Cause

1. parent component is re-render 🟣

2. state changes 🟠

3. prop changes 🔴

In JavaScript, aside from the primitive type (string, number, undefined, etc), object {} is saved by reference, that’s including array [] and function () => {} .

1. Use React.memo

import React from "react";

function App() {
  // 2. Updating state will trigger re-render
  const [_, setCounter] = React.useState(0);

  return (
    <>
      {/* 1. button clicked -> we updating the state */}
      <button onClick={() => setCounter((counter) => counter + 1)}>
        Click me to trigger re-render
      </button>

      {/* 3a. About1 re-render too because it's parent component re-render */}
      <About1 />

      {/* 3b. About2 will not re-render because wrapped in memo */}
      <About2 />
    </>
  );
}

const About1 = () => {
  console.log("About1 rendered");
  return "about 1 page";
};

const About2 = React.memo(() => {
  console.log("About2 rendered");
  return "about 2 page";
});

2. Use React.useMemo

Notice that useMemo is DIFFERENT with memo that we discuss in previous point

1. In example below, we use useMemo to prevent recreate object when it’s passed as a prop. This is will fix issue (c) 🔴

import React from 'react';

export function App() {
   // 2. Updating state trigger re-render
  const [_, setCounter] = React.useState(0);

  // 3a. Re-render cause React to recreate this object again
  const data = { name: "Ilham" }

  // 3b. Will not recreated, only created once on initial render
  const memoizedData = React.useMemo(() => ({ name: "Ilham" }), []);

  return (
    <>
      {/* 1. button clicked -> we updating the state */}
      <button onClick={() => setCounter(counter => counter + 1)}>
        Click me to trigger re-render
      </button>
   
      {/* 4a. Title 1 re-render, because different reference treated as diff value,  */}
      <Title number={1} data={data} />
 
      {/* 4b. Title 2 will NOT re-render because the object still same */}
      <Title number={2} data={memoizedData} />
    </>
  );
}

// 5. React.memo help us prevent re-render because parent re-render (a)
//    but it's not prevent re-render because (c) if object reference is changed
const Title = React.memo(props => {
  return <p>props.name</p>;
});

import { useMemo, useState, useEffect } from 'react'

function App() {
	const [_, setCounter] = useState(0)

	const data = { name: "Ilham" }

	useEffect(() => {
		console.log('useEffect 1 firing')
	}, [data])
	
	const memoizedData = useMemo(() => data, [data])
	
	useEffect(() => {
    console.log('useEffect 2 firing')
	}, [memoizedData])
  
	return (
		<button onClick={() => setCounter(counter => counter + 1)}>
			Trigger re-render
		</button>
	)
}

3. Use React.useCallback

1. In example below, we use useMemo to prevent recreate function when it’s passed as a props. This is will fix issue (c) 🔴

import React from 'react';

export function App() {
   // 2. Updating state trigger re-render
  const [_, setCounter] = React.useState(0);

  // 3a. Re-render cause React to recreate dummyFunc
  const dummyFunc = () => {}

   // 3b. Will not recreated, only created once on initial render
  const memoizedDummyFunc = React.useCallback(() => {}, []);

  return (
    <>
      {/* 1. button clicked -> we updating the state */}
      <button onClick={() => setCounter(counter => counter + 1)}>
        Click me to trigger re-render
      </button>
   
      {/* 4a. Title 1 re-render, because different reference treated as diff value,  */}
      <Title number={1} func={dummyFunc} />
 
      {/* 4b. Will not re-render because the object still same */}
      <Title number={2} func={memoizedDummyFunc} />
    </>
  );
}

// 5. React.memo help us prevent re-render because parent re-render (a)
//    but it's not prevent re-render because of (c) object reference is changed
const Title = React.memo(props => {
  return <p>{props.number}</p>;
});

import React from 'react'

function App() {
	const [name, setName] = React.useState("")
	
  const memoizedInitData = React.useCallback(() => {
	  setName("Ilham")
  }, []);
	
	React.useEffect(() => {
		memoizedInitData()
	}, [memoizedInitData])
	
	return <div>{counter}</div>
}

4. Use React.useRef

import React from 'react'

export function App() {
	// This log only called on initial render
	// because re-render NOT happened when the value inside ref is changed
  console.log("App")

	const dataRef = React.useRef({})
	const timeoutIdRef = React.useRef(null)
	
	const actionSubmitForm = (event) => {
		event.preventDefault()
		
		const timeOut = setTimeout(() => {
			alert(`Data submitted : ${dataRef.current.firstName}`)
		}, 2000)
		
		// 3. setTimeout run
		//    we store the id to being able to cancel it, no re-render
		timeoutIdRef.current = timeOut
	}

  const cancelSubmitForm = () => {
    clearTimeout(timeoutIdRef.current)
  }
	
	return (
		<form onSubmit={actionSubmitForm}>
			<input
				placeholder="First name"
				{/* 1. User type and update the value of ref, no re-render */} 
				onChange={event => {
					dataRef.current.firstName = event.target.value
				}}
			/>
			<button type="submit">
				Submit
			</button>
			{/* 2. User submit the form */}
      <button type="button" onClick={cancelSubmitForm}>
	      Cancel
	     </button>
		</form>
	)
}

5. AVOID React.Context

import React from "react";

const ProfileContext = React.createContext();

export function App() {
  // 3. State change trigger "App" re-render
  const [count, setCount] = React.useState(0);

  const increase = () => {
    // 2. update the state
    setCount(data => data + 1);
  };

  return (
    <ProfileContext.Provider value={{ count, increase }}>
      <MyButton />
      <Footer />
    </ProfileContext.Provider>
  );
}

function MyButton() {
  const profileContext = React.useContext(ProfileContext);
  const { count, increase } = profileContext;

  // 1. Click the button to increase count
  return <button onClick={increase}>Increase {count}</button>;
}

function Footer() {
  // 4. "Footer" re-render, because the "App" (it's parent) re-render
  //    eventhough "Footer" don't consume the context :(
  return <div>Footer</div>;
}

import { create } from "zustand"; // we use old version 2.2.0 here

const [useCount] = create((set) => ({
  count: 1,
  // 3. Count is increased
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

export function App() {
  return (
    <>
      <MyButton />
      <Footer />
    </>
  );
}

function MyButton() {
  const count = useCount((store) => store.count);
  const increase = useCount((store) => store.increase);

  // 1. Click the button to increase count
  return <button onClick={increase}>Increase {count}</button>;
}

function Footer() {
  console.log("Footer");

  // 3. Footer not re-render anymore :)
  //    because Footer don't consume the context
  //    and it's parent no longer wrapped by context
  return <div>Footer</div>;
}

6. Use React Compiler

…it automatically optimizes your React application by handling memoization for you, eliminating the need for manual useMemo, useCallback, and React.memo

1. eliminate all of the manual memoizing methods that we describe previously, so this will fix all those three issue 🟣 🟠 🔴

2. it’s know what we did wrong in our memoization and fix it

3. help us to focus on building features

Why React Re-Renders • Josh W. Comeau

In React, we don't update the DOM directly, we tell React what we want the DOM to look like, and React tackles the rest. But how exactly does it do this? In this tutorial, we'll unpack exactly when and why React re-renders, and how we can use this information to optimize the performance of our React apps.

https://www.joshwcomeau.com/react/why-react-re-renders/