Why doesn't memo help select(id)} style={{ gap: 8 }} />?

The callback and the style object are recreated on every render

memo doesn't work with arrow functions in props

memo can't compare arrays in props

React · Middle · Question 4 of 75

Why doesn't `memo` help `<List items={data} onSelect={() => select(id)} style={{ gap: 8 }} />`?

1memo doesn't work with arrow functions in props
✓Correct answer: The callback and the style object are recreated on every render
3memo can't compare arrays in props

Explanation

An inline function and an object literal are new references on every render, so shallow comparison won't let them through. Stabilize them with useCallback / useMemo, or move constants outside the component. The React Compiler does this automatically.

Why doesn't `memo` help `<List items={data} onSelect={() => select(id)} style={{ gap: 8 }} />`?

Explanation

Further reading

Problem with a question

Test yourself

Why doesn't memo help <List items={data} onSelect={() => select(id)} style={{ gap: 8 }} />?

Explanation

Further reading

Test yourself

Why doesn't `memo` help `<List items={data} onSelect={() => select(id)} style={{ gap: 8 }} />`?