useMemo provides Redux

Question

I'm new to Redux and I'd like to maximize the performance of my web application.

I have a state in redux that I store in a variable to display later.

This is the code:

constmetricsState = useSelector((state: MetricsStateObject) => state.MetricsState);
const myMetrics =metricState.myMetrics;

I found that useMemo improves performance by not re-rendering if the data has not changed.

So I'm wondering if const myMetrics = useMemo(() =>metricsState.myMetrics, [metricsState.myMetrics]); is a good practice, or is it completely useless?

Thank you for your time.

Answer 1

Let’s talk about the conclusion first, it’s completely useless.

Why? Because metricsState.myMetrics is just a value process and does not involve expensive calculations.

But useMemo itself consumes a certain amount of calculation.

So I think this is premature optimization

Answer 2

useMemo Use for expensive calculations where you don't want to run every render. like

const some = useMemo(()=> megaBigArray.reduce((acc,i)=>acc*i,0), [megaBigArray])

or something similar. You only evaluate this variable when megaBigArray changes.

In your case, the code will run on every render anyway, but useSelector should only trigger the render when the part of the store you selected changes. So you should be able to get by just fine without it.