title: Why isn't React.useMemo(...) working in my React function?
body: <p>I'm trying to implement a react-table using this guide:</p>
  
  <p><a href="https://github.com/tannerlinsley/react-table/blob/master/docs/quickstart.md" rel="nofollow noreferrer">https://github.com/tannerlinsley/react-table/blob/master/docs/quickstart.md</a></p>
  
  <p>At one point in the guide, it says to create your data using React.useMemo:</p>
  
  <pre><code>const columns = React.useMemo(
    () =&gt; [
      {
        Header: 'Column 1',
        accessor: 'col1', // accessor is the "key" in the data
      },
      {
        Header: 'Column 2',
        accessor: 'col2',
      },
    ],
    []
  )
  </code></pre>
  
  <p>When I do this, I copy and paste this line into my code (replacing the data with my own data):</p>
  
  <pre><code>class Blog extends Component {
  
  ...
  
  createTable() {
  
      const cols = React.useMemo(
          // copy and paste here
      );
  
      // more table creation code
  
      return (
          // jsx for table
      );
  }
  
  ...
  
  }
  </code></pre>
  
  <p>But when I run this, it tells me:</p>
  
  <pre><code>Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  </code></pre>
  
  <p>So after googling this problem, I gathered that I need to call useMemo in a React funcion. So I created this:</p>
  
  <pre><code>import React from 'react';
  
  const getCols = () =&gt; {
      return React.useMemo(() =&gt; [
          {
              Header: 'title',
              accessor: 'titleCol'
          },
          {
              Header: 'body',
              accessor: 'bodyCol'
          },
          {
              Header: 'last updated',
              accessor: 'updatedAtCol'
          }
      ], []);
  };
  
  export default getCols;
  </code></pre>
  
  <p>And in my Blog class:</p>
  
  <pre><code>class Blog extends Component {
  
  ...
  
  createTable() {
  
      const cols = getCols();
  
      // more table creation code
  
      return (
          // jsx for table
      );
  }
  
  ...
  
  }
  </code></pre>
  
  <p>But now it tells me:</p>
  
  <pre><code>React Hook "React.useMemo" is called in function "getCols" which is neither a React function component or a custom React Hook function
  </code></pre>
  
  <p>Why isn't it a React function?</p>
  
  <p>More importantly, what is the proper way to call useMemo(...)?</p>
  
  <p>Thanks.</p>