React tree view app utilising Hooks (i.e. useCallback) - reactjs

Question

I am looking for opinions on my approach on building React tree view app utilising Hooks.
Here's the code, utilising useCallback, React.memo and useState. Please note that there can be only one 1st level item opened at time, rest of the levels may have multiple items opened at once.
Branch.js:
import React, { useState, useCallback} from 'react'
import Leaf from './Leaf'
const Branch = ({ items }) => {
const [expanded, setExpanded] = useState([])
const clickHandler = useCallback(
({ categoryId, level }) => {
let result
if (level === 1) {
result = expanded.includes(categoryId) ? [] : [categoryId]
} else {
result = expanded.includes(categoryId) ? expanded.filter(item => item !== categoryId) : [ ...new Set([ categoryId, ...expanded])]
}
setExpanded(result)
},[expanded])
return (
<ul>
{items && items.map(item => {
const { categoryId, categoryName, level, eventsCount, children } = item
return (
<Leaf
key={categoryId}
categoryId={categoryId}
name={categoryName}
level={level}
eventsCount={eventsCount}
children={children}
isOpen={expanded.includes(categoryId)}
onClick={clickHandler}
/>
)})}
</ul>
)
}
export default Branch
Leaf.js:
import React from 'react'
import Branch from './Branch'
const Leaf = React.memo(({ name, categoryId, level, children, eventsCount, onClick, isOpen }) => {
const _onClick = () => {
onClick({ categoryId, level })
}
return (
<li className={!isOpen && 'hidden'}>
<button onClick={_onClick}>
<span>{name}</span>
</button>
{children.length ? <Branch items={children}/> : ''}
</li>
)
})
export default Leaf
I'd like someone to review the code for performance (i.e. number of unnecessary re-renders) that might be happening. I am interested in your opinion on my usage of React.memo and click event handler (useCallback).
Does the way I am passing down clickHandler and then receiving and firing that handler causes or prevents additional re-renders?

Answer 1

It would be more efficient with functional updates:
const clickHandler = useCallback(
({ categoryId, level }) => {
setExpanded(expanded => {
let result
if (level === 1) {
result = expanded.includes(categoryId) ? [] : [categoryId]
} else {
result = expanded.includes(categoryId) ? expanded.filter(item => item !== categoryId) : [ ...new Set([ categoryId, ...expanded])]
}
return result
}
}, []
)
So the handler doesn't change at all.

Answer 2

The only major performance limitation in your code is that if expanded changes a new clickHandler callback is created which will cause all Leaf component memoization to break thus re-rendering all components instead of only that particular component whose isOpen prop has changed
So the solution to improve performance involves avoiding recreating clickHandler callback as much as possible. There are two ways to solve the above problems
First: The first solution involves using callback method for setState and using useCallback only on initial render
const Branch = ({ items }) => {
const [expanded, setExpanded] = useState([])
const clickHandler = useCallback(
({ categoryId, level }) => {
setExpanded(prevExpanded => {
let result
if (level === 1) {
result = expanded.includes(categoryId) ? [] : [categoryId]
} else {
result = expanded.includes(categoryId) ? expanded.filter(item => item !== categoryId) : [ ...new Set([ categoryId, ...expanded])]
}
return result;
})
},[])
return (
<ul>
{items && items.map(item => {
const { categoryId, categoryName, level, eventsCount, children } = item
return (
<Leaf
key={categoryId}
categoryId={categoryId}
name={categoryName}
level={level}
eventsCount={eventsCount}
children={children}
isOpen={expanded.includes(categoryId)}
onClick={clickHandler}
/>
)})}
</ul>
)
}
export default Branch;
Second: When the logic to update state becomes complex then using callback method for state update may get confusing and difficult to debug. In such cases its better to make use of useReducer instead of useState and use the dispatch action to set state
const initialState = [];
const reducer = (state, action) => {
switch(action) {
case 'UPDATE_EXPANDED': {
const { level, categoryId } = action;
if (level === 1) {
return state.includes(categoryId) ? [] : [categoryId]
} else {
return state.includes(categoryId) ? state.filter(item => item !== categoryId) : [ ...new Set([ categoryId, ...state])]
}
}
default: return state;
}
}
const Branch = ({ items }) => {
const [expanded, dispatch] = useReducer(reducer, initialState);
return (
<ul>
{items && items.map(item => {
const { categoryId, categoryName, level, eventsCount, children } = item
return (
<Leaf
key={categoryId}
categoryId={categoryId}
name={categoryName}
level={level}
eventsCount={eventsCount}
children={children}
isOpen={expanded.includes(categoryId)}
onClick={dispatch}
/>
)})}
</ul>
)
}
const Leaf = React.memo(({ name, categoryId, level, children, eventsCount, onClick, isOpen }) => {
const _onClick = () => {
onClick({ type: 'UPDATE_EXPANDED', categoryId, level });
}
return (
<li className={!isOpen && 'hidden'}>
<button onClick={_onClick}>
<span>{name}</span>
</button>
{children.length ? <Branch items={children}/> : ''}
</li>
)
})
export default Leaf
export default Branch;