[Feature request?] Memoizing object and array literals passed to React properties, child array mapping

[jedwards1211]

I wanted to check if this plugin already does things like this?

Before

const Foo = ({siteId, configId}) => (
  <Plot
    channelIds={[
      `site/${siteId}/simulation/${configId}/inverter/pv_load`,
      `site/${siteId}/simulation/${configId}/grid/building_load`,
    ]}
  />
)

After

const Foo = ({siteId, configId}) => (
  <Plot
    channelIds={useMemo(() => [
      `site/${siteId}/simulation/${configId}/inverter/pv_load`,
      `site/${siteId}/simulation/${configId}/grid/building_load`,
    ], [siteId, configId])}
  />
)

Also children can benefit from memoization too:

Before

const Plot = ({channelIds}) => (
  <div>
    {channelIds.map(channelId =>
      <Trace key={channelId} channelId={channelId} />
    )}
  </div>
)

After

const Plot = ({channelIds}) => (
  <div>
    {useMemo(() => channelIds.map(channelId =>
      <Trace key={channelId} channelId={channelId} />
    ), [channelIds])}
  </div>
)

[DAB0mB]

I'm just trying to think, because it seems like this behavior might break very easily. What if there's a condition expression? Such as cond ? a : b. The order of the hooks is essential with React hooks. I hope I'm not wrong about it. Feel free to debunk my theory

[jedwards1211]

Ah, I'm sorry, I inlined the useMemo calls in my examples just to demonstrate where the memoization is being applied, and you are right, if the parent components were rendered conditionally it would cause problems. Definitely in a real implementation we would want to hoist the memoization up to the top, so for the first example:

const Foo = ({siteId, configId}) => {
  const _channelIds = useMemo(() => [
    `site/${siteId}/simulation/${configId}/inverter/pv_load`,
    `site/${siteId}/simulation/${configId}/grid/building_load`,
  ], [siteId, configId])
  return <Plot channelIds={_channelIds} />
}

As long as the hooks are hoisted there are no naive rules of hooks violations I can think of...