Performance
Homebase React tracks the attributes consumed in each component via the entity.get
function and scopes those attributes to their respective useEntity
or useQuery
hook. Re-renders are only triggered when an attribute changes.
The default caching reduces unnecessary re-renders and virtual DOM thrashing a lot. That said, it is still possible to trigger more re-renders than you might want.
Smart Prop Drilling
One top level useQuery
+ prop drilling the entities it returns will cause all children to re-render on any change to the parent or their siblings.
To fix this we recommend passing ids to children, not whole entities. Instead get the entity in the child with useEntity(id)
. This creates a new scope for each child so they are not affected by changes in the state of the parent or sibling components.
Good Prop Drilling
1const TodoList = () => {
2 const [todos] = useQuery({
3 $find: 'todo',
4 $where: { todo: { name: '$any' } }
5 })
6 return (todos.map(t => <Todo key={t.get('id')} id={t.get('id')} />))
7}
8
9const Todo = React.memo(({ id }) => {
10 const [todo] = useEntity(id)
11 // ...
12})
Bad Prop Drilling
1const TodoList = () => {
2 const [todos] = useQuery({
3 $find: 'todo',
4 $where: { todo: { name: '$any' } }
5 })
6 return (todos.map(t => <Todo key={t.get('id')} todo={t} />))
7}
8
9const Todo = React.memo(({ todo }) => {
10 // ...
11})
React Hooks Performance
If you're looking for more optimizations check out the React docs on optimizing hooks.