Confusing example in documentation

[imMatheus]

Summary

In the perfomance section of the docs, at the end there is a code example that seems to be outdated. If you look at the code for the Item component, in the use useMemo its referring to a val variable in the useAtom(atom(val)) part. But this variable does not exist in the rest of the code. Im guessing that it should be initialValue. Also its pretty weird that the Item code has React.useMemo but the List just uses useMemo, In my opinion this can be confusing as to why there is a difference.

Link to reproduction

https://jotai.org/docs/guides/performance

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

[dai-shi]

Can you please open a PR to improve docs?

[dai-shi]

Or, feel free to ask questions here before working on it.

[mxthxngx]

I tried implementing the example given in the documentation and I get the following error
React Hook "useAtom" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.eslint[react-hooks/rules-of-hooks](https://reactjs.org/docs/hooks-rules.html)
I can try taking this up but with little more context on what is trying to happen, could you answer the following questions?

1. If we are using a local state setToggle then why are we trying to update the parent as well? Could you explain the usecase of what the problem statement itself is?
2. Do we actually require a useMemo at all?
   I'm pretty new to jotai, would be great if you could help

[dai-shi]

Thanks for the heads-up. This guide is not well written at all. "Memoized pattern" section should be removed as it's just wrong. Or, I'm fine to remove this entire "Performance" guide.

[mxthxngx]

I can take it up, could you assign it to me?
I think performance guide has aspects about the focusAtom and splitAtom which might be useful as it can be combined with the useMemo (found the following example in your code:

  const nameAtom = useMemo(
    () => focusAtom(fieldAtom, (o) => o.prop('name')),
    [fieldAtom],
  )

Maybe we can remove everything from the "Stop observing" pattern section.

[dai-shi]

Okay, please open a draft PR and let's discuss details there. (that implies "assigned.")

[mxthxngx]

PR Link
@dai-shi Let me know if there is anything else required. Thank you for letting me contribute!