Why so much useMemo?

[danielo515]

Hello, first thank you very much for this awesome lib.
Use memo is very common on the examples, however I don't see a clear explanation of why it is used for things that does not make any sense.
For example, from the docs of global filter

global Filer
... If a function is passed, it must be memoized

Why? Why do you need to memoize a function that you have defined at the root of the file? That is just extra burden that in fact slows down for no reason.
The example of global filter does a different thing that can make sense, but it is on a different situation:

function Table({ columns, data }) {
  const filterTypes = React.useMemo(
    () => ({
      // Add a new fuzzyTextFilterFn filter type.
      fuzzyText: fuzzyTextFilterFn,
      // Or, override the default text filter to use
      // "startWith"
      text: (rows, id, filterValue) => {
        return rows.filter(row => {
          const rowValue = row.values[id]
          return rowValue !== undefined
            ? String(rowValue)
                .toLowerCase()
                .startsWith(String(filterValue).toLowerCase())
            : true
        })
      },
    }),
    []
  )

Here useMemo makes sense because, inside the Table function you are creating the object that holds the option, but again, this object, or the functions that compose it can be created outside of the table component (functions inside do not have any dep of the table props) and no need for memoizing.
So, why having this on the docs in places where it is not actually required?

[MatteBailey]

I would also appreciate an answer to this. Rather than memoization, it would seem that what the docs are actually requesting is reference equality for the supplied objects and functions. useMemo and useCallback are one way to ensure reference equality, but you can also just define things outside of your render function when possible. @tannerlinsley, am I missing something here?

[tannerlinsley]

You are correct. Referential equality from render to render. Tanner Linsley

…

On Mar 25, 2021, 4:36 PM -0600, Matte Bailey ***@***.***>, wrote: I would also appreciate an answer to this. Rather than memoization, it would seem that what the docs are actually requesting is reference equality for the supplied objects and functions. useMemo and useCallback are one way to ensure reference equality, but you can also just define things outside of your render function when possible. @tannerlinsley, am I missing something here? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[danielo515]

Then maybe you can write a note on the docs? I don't want to see beginners start to memoize everything on everyplace introducing performance penalties for no reason just because "they saw it"

[devuxer]

I also wonder about this when data is stored in state management, like a Jotai Atom. Am I supposed to do useMemo(useAtomValue(dataAtom))? This seems like it should be unnecessary since the state manager is already memoizing, but I confess I don't understand these things at a deep enough level to know for sure.

[fresheneesz]

If all that's needed is referential equality, can someone please update the docs to make that clear? Its very misleading to say that useMemo is required in these various places.