When does Preact re-render function components?

[emschwartz]

I am managing my app state using just hooks for now, similar to the approach described in State management with just React hooks. The app is small so re-rendering components too often isn't a big issue at the moment, but I'm curious about how I would go about avoiding unnecessary re-renders.

For context, I have a "store" that's created like this:

const StoreContext = createContext({
  state: DEFAULT_STATE,
  dispatch: (() => { }) as (action: ACTION) => void
})

export function createStore() {
  const [state, dispatch] = useReducer(reducer, DEFAULT_STATE)
  const store = useMemo(() => ({ state, dispatch }), [state, dispatch])
  return store
}

export function useStore() {
    return useContext(StoreContext)
}

If I have a function component that calls the useStore hook, then pulls a specific property out of the state, and uses that property to return a JSX element.

Is the DOM element re-rendered when:

1. any part of the state stored in the Context changes
2. the JSX element returned from the function component would be different than what is already there
3. or is it based on something else?

Thanks!

[JoviDeCroock]

Hey 👋

Interesting question, let's take the following scenario to complete your example:

const Child = () => {
  const [state] = useStore();
  return (<p>{state.text}</p>
}

Context will emit to this consumer every time anything in the object changes, however this does not mean that anything will change to this <p> tag. In this case we have two possible scenario's:

• someone changed text, this means that we'll have to update the text-node from oldValue to newValue
• text remains the same, we check if something change and move away.

So concluding, without a change to state.text no expensive operations to the DOM will happen.

[emschwartz]

Got it, that makes sense. Thanks!