Why can't I put the header / columns array outside of the functional component?

[Obiwarn]

Hey there,

I just finished the Quick Start tutorial. Could someone explain why we have to define the columns array inside of the functional component? Couldn't I just define them outside (without React.memo)? Why would this cause to rerender?

Why this (shortened from the tutorial):

 function App() {

   const columns = React.useMemo(
     () => [
       {
         Header: 'Column 1',
         accessor: 'col1', // accessor is the "key" in the data
       },
     ],
     []
   )


   // use columns here
   return (
     <table/>)
}

instead of this:

const columns = [
     {
       Header: 'Column 1',
       accessor: 'col1', // accessor is the "key" in the data
     },
     {
       Header: 'Column 2',
       accessor: 'col2',
     },
   ];

 function App() {
   // use columns here
   return (
     <table/>)
}

[martitv]

Have you tried putting it outside?
Tried now, doesn't seem to make much of a difference.

I'm assuming you would have it inside your component if you need something from state to calculate a Cell-render function or something like that. Else i agree, there shouldn't be a reason for it to be inside the component

[martitv]

useMemo is purely for optimizations according to react docs. I can't really see any difference between a memoized value with an empty deps array and a constant defined outside the component.

[Obiwarn]

Indeed. But: @tannerlinsley is a React guru. There must be some reason. :-D

[tannerlinsley]

If your columns or data rely on dynamic values in the component, you must memoize them for referential stability.

[tannerlinsley]

You can place them outside, which is more likely for columns that might never change. But data usually comes from a dynamic source. Sometime that source is already stable (like react query) or not (like a mapped copy of an array that is created in a render function)

[Obiwarn]

Thank you for clearing this up.