useComputedValue causing re-render despite memoization

[ryanpwaldon]

Hey everyone,

My computed value causes re-renders when passed to a memoized component. The value depends on two properties – a regular value, and a SkiaValue. The issue only occurs only when I pass a regular value into the deps array.

Maybe this is intended. Are we not supposed to pass regular values to deps?

Here's an example:

// <Chart/> re-renders every time wave is changed

function Forecast({ wave, category }) {

  const chartData = useComputedValue(() => {
    const forecastData = wave.forecast[category.current].data
    return cols.map((i) => ({
      color: forecastData[i]?.barColor ?? 'gray',
      height: forecastData[i]?.barHeight ?? 100,
      rotation: forecastData[i]?.direction ?? 0
    }))
  }, [wave, category])

  return <Chart chartData={chartData} /> // memoized
}

[wcandillon]

I'm not sure what you mean exactly but have you been looking at the reanimated 3 integration: https://shopify.github.io/react-native-skia/docs/animations/reanimated?
If you are using reanimated already, this might produce results that match better with your expectations.