Re-render

Please turn on "Highlight updates when components render" in React devtools

Press this button to rerender the parent component.

  • 1. Props from context（useContext） → re-rendered

    name: apple, value: 120

    Details

    Data source

    
const { state } = useContext(ShopContext)
const appleFromContext = state.shop.items.find((item) => item.name === 'apple')

    Usage

    <Item item={props.appleFromContext} />

    Component Definition

    const Item = (props) => ReactElement

  • 2. Props from selector（reselect）
    → re-rendered and skipped re-calculating

    name: apple, value: 120

    Details

    Usage

    <Item item={props.appleFromSelector} />

    Component Definition

    const Item = (props) => ReactElement

  • 3. Props from context(useContext) → re-rendered

    name: apple, value: 120

    Details

    Usage

    <ContextItem />

    Component Definition

    const ContextItem = () => ReactElement

  • 4. Memoized Component → skipped re-rendering(fastest)

    name: apple, value: 120

    Details

    Usage

    <MemoizedItem item={props.appleFromContext} />

    Component Definition

    const MemoizedItem = memo(props) => ReactElement

  • 5. Props from useMemo → re-rendered

    name: apple, value: 120

    Details

    Usage

    <Item item={props.appleFromUseMemo} />

    Component Definition

    const memoizedApple = useMemo((props) => // some logic, [])

    Caution: It may cause a bug because of no dependencies array.

  • 6. Props from useContext and useMemo → re-rendered

    name: apple, value: 120

    Details

    Usage

    <UseMemoItem />

    Component Definition

    const MemoizedItem = () => ReactElement
    const { state } = useContext(ShopContext)
    const item = useMemo(() => // some logic, [state.shop.items])
Actual Rendering
re-render

subtotal: 215

tax: 21.5

total: 236.5（subtotal * tax）

  • name: apple, value: 120
  • name: orange, value: 95
Top