Selectors

Sometimes, our state might be an object and we only need to the value of certain properties from that object, but when any property is changed, the entire object changes, resulting in components to re-render. This is when selectors can help us overcome this problem.

Take IUserState for example, we might have a component that is only responsible for showing luckyNumber and we do not want it to re-render when firstName changes.

interface IUserState {
  firstName: string
  lastName: string
  luckyNumber: number
}

const UserState = new StateManager<IUserState>({
  firstName: 'John',
  lastName: 'Smith',
  luckyNumber: 42,
})

We can pass (state) => state.luckyNumber as the second parameter to useStateValue.

const luckyNumber = useStateValue(UserState, (state) => state.luckyNumber)

By doing so, only the previous and upcoming values of state.luckyNumber is compared when the state changes. Therefore, the component will only re-render when luckyNumber changes.

Example

In this example, we can confirm that the component does not re-render by verifying that console.log('Rendering...') is not executed no matter how many times the value of firstName changes, but whenever luckyNumber changes, it will be executed.