Cases Where React Components Re-Render

[kokocan12]

Intro

This is my personal point of view.
Do not accept without doubt.

Common Thought

The common thought of re-render is that ...

1. React component is re-rendered when states are changed.
2. React component is re-rendered when props are changed.

But that's not right.

When React Component Re-Render?

1. React component is re-rendered when states are changed.
2. React component is re-rendered when high-order component is re-rendered.

Props Change Does Not Affect Re-Render

Evidence 1

const App = () => {
    const [name, setName] = useState( 'hong' )
    const [age, setAge] = useState( 1 )

    const changeName = () => setName( name + 'h' )
    const changeAge = () => setAge( age + 1 )

    return [
        <div key="1">current name : {name}</div>,
        <div key="2">current age : {age}</div>,
        <button key="3" onClick = { changeName }>change name</button>,
        <button key="4" onClick = { changeAge }>change age</button>,
        <B key="5" name = { name } age = { age } />
    ]
}

const B = ( { name, age } ) => {
    return [<h1 key="1">hi! i'm B, { name }</h1>, <A key="2" age={ age } />]
}

const A = ( { age } ) => {
    return <h1>{ age }</h1>
}

This is the test app of react re-render.
When name is changed, A is re-rendered.
Although A is not relevant with "name", but it is re-rendered, because B is high order component of A.

Evidence 2

// App.jsx
const App = () => {
    const [name, setName] = useState( 'hong' )
    const [age, setAge] = useState( 1 )

    const changeName = () => setName( name + 'h' )
    const changeAge = () => setAge( age + 1 )

    return [
        <div key="1">current name : { name }</div>,
        <div key="2">current age : { age }</div>,
        <button key="3" onClick = { changeName }>change name</button>,
        <button key="4" onClick = { changeAge }>change age</button>,
        <B key="5" name = { name } age = { age } />
    ]
}

// B.jsx
const B = ( { name, age } ) => {

    return [<h1 key="1">hi! i'm B, { name }</h1>, <A key="2" age={ age } />]
}

const memoizedB = memo(B, (prev, next) => {
    const { name : prevName } = prev
    const { name : nextName } = next

    return prevName === nextName
})

export { memoizedB as B }

// A.jsx
const A = ( { age } ) => {
    return <h1>{ age }</h1>
}

export { A } 

This is the another react app.
Although age is changed, A would not be re-rendered.
'Age is changed' means the props of the A is changed, but re-render is not triggered. Why?
Because the high order component of A(=B) is not re-rendered.