Exploring render optimization

Let's recap on selector-based render optimization. We will start by using an example from Chapter 4, Sharing Module State with Subscription, where we created createStore and useStoreSelector.

Let's define a new store person with createStore. We define three properties: firstName, lastName, and age, as follows:

const personStore = createStore({
  firstName: "React",
  lastName: "Hooks",
  age: 3,
});

Suppose we would like to create a component that shows firstName and lastName. One straightforward way is to select those properties. Here is an example with useStoreSelector:

const selectFirstName = (state) => state.firstName;
const selectLastName = (state) => state.lastName;
const PersonComponent = () => {
  const firstName =
    useStoreSelector(store, selectFirstName);
  const lastName = useStoreSelector(store, selectLastName);
 ...