React Hooks：有条件地渲染一个组件，但可以访问整个 state

Question

Let's say my state is represented by an object like that:

state = {
    array: [1, 2, 3, 4, 5]
}

I know if i use:

const state = useSelector(state => state.array)

My component re-render every time one of the elements of the array changes, but i don't want it. So, a solution can be:

state = {
    render: false,
    array: [1, 2, 3, 4, 5]
}

And now i can:

const state = useSelector(state => state.render)

And handle the rendering by conditionally dispatching some actions. But in this way i have no access to the array anymore. The problem here is that in my project the are components who need to re-render every time the array updates, and components who need to re-render only in specific cases. Another solution is to create another store only for the component which need to re-render rarely, but it seems too wired to me.

Answer 1

useSelector accepts a second argument equlityFn :

const result: any = useSelector(selector: Function, equalityFn?: Function)

If equlityFn returns true , no subscription update will accurate, so the render won't result from the selector.

const state = useSelector(
  (state) => state.array,
  (prevState, currState) => {
    return isRender(currState);
  }
);