feat(resval v1.0.0-beta) - rendering optimization using cache

[nurulakbaral]

React Resval v1.0.0-beta - Rendering optimization

What's going on here?

Over time, an application will have a bloated size, as well as the use of Resval. The pull request shows that there are two things that have been optimized. The first is when the component re-renders and the second is when the viewport changes. The temporary idea being implemented is to use the cache concept.

Re-render Component Optimization

We know that when a component uses a certain hook, the computation of that hook will be performed every time the component re-renders. Take a look at the code below:

// 1) When this component re-renders,
export function Component() { 

  // 2) then `useVx` will recompute,
  // 3) because Resval uses a cache approach, it won't do that anymore.
  const { fontSize, color } = useVx({
    fontSize: { base: '12px', md: '24px' },
    color: { base: 'red', '600px': 'blue', lg: 'black' }
  })

  return (
    <div>
      <h1 style={{ fontSize, color }}>Hello Resval!</h1>
    </div>
  )
}

In the initial render, we know that useVx already has a value. This value will always be stable when the component it contains re-renders. A simple idea to avoid unnecessary redundant computations, Resval uses a cache with new Map(). The result of the implementation is as shown below with the help of React Profiler.

In the initial render, of course, it will do the Resval computation for the first time (in this benchmark it uses 1000_000 ops). However, in the next rendering of the component, the computation will no longer be performed, because it is already stored in the cache.

Viewport Change Optimization

Optimization for components that perform rendering resolved. Hmm.. ok, but what about the timestamps that occur when the viewport changes multiple times!
Yep! Resval uses the same concepts as re-rendering components to optimize for this case. The idea is very simple, every time the viewport changes, the result of the computation will be put into the cache, not during the initial render. In short, the first change of viewport will certainly do the computation, but when the viewport returns to a certain size, the value of useVx is just called from the cache. See the benchmark results as shown below:

It will only do large computations in the initial render stage and only viewport changes. Otherwise it will fetch the useVx value from the cache.

How do we benchmark?

The benchmark that was carried out in this test was to create a 1000_000 property for objects in useVx, createResponsiveValues must be defined outside the component or in another module, don't let it be defined inside the component because it will always re-compute every time the component re-renders.

const useVx = createResponsiveValues({
  breakpoints: {
    base: '0px',
    xs: '320px',
    sm: '576px',
    md: '768px',
    lg: '1080px',
    xl: '1280px',
  },
  media: 'min',
})

export function Component() { 
    const { color1, color2 } = useVx({
      color1: { base: 'red', xs: 'green', sm: 'blue', md: 'salmon', lg: 'aqua', xl: 'gray', },
      color2: { base: 'red', xs: 'green', sm: 'blue', md: 'salmon', lg: 'aqua', xl: 'gray', },
      // .....
      color1000000: { base: 'red', xs: 'green', sm: 'blue', md: 'salmon', lg: 'aqua', xl: 'gray', }
    })
   
   return <h1>Hello</h1>   

}