CODEWITHSUNDEEP
javascriptreactjsreduxreact-hooks
Nicola Scionti
Nicola Scionti

Reputation: 5

React Hooks: conditionally render a component but with access to the whole state

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.

Upvotes: 0

Views: 473

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

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);
  }
);

Upvotes: 3

Related Questions