title: Is it necessary to use useMemo in react table?
body: <p>I would like to know it's necessary to use useMemo in react table for columns and data if yes why it's so?</p>
  <p>This is my code:</p>
  <pre><code>import React, { useMemo } from &quot;react&quot;;
  import useData from &quot;../../hooks/useData&quot;;
  import Table from &quot;./Table&quot;;
  
  import Loader from &quot;../../assets/imgs/loader.svg&quot;;
  
  const TableSection = React.memo(({ query, isOpen }) =&gt; {
    const { data, runtime, error } = useData(query);
  
    const column =
      data.length &gt; 0 &amp;&amp;
      Object.keys(data[0]).map((key) =&gt; {
        const result = data[0][key]
          .replace(/([A-Z]+)/g, &quot; $1&quot;)
          .replace(/([A-Z][a-z])/g, &quot; $1&quot;);
        return {
          Header: result,
          accessor: key,
        };
      });
    const columns = useMemo(() =&gt; column, [column]);
    const queryData = useMemo(() =&gt; data.slice(1), [data]);
  
    if (error)
      return (
        &lt;section
          className={`${
            isOpen ? &quot;col-start-2&quot; : &quot;col-start-1&quot;
          } col-end-3 row-start-3 row-end-4 text-white m-6`}
        &gt;
          &lt;h1 className=&quot;text-center font-bold text-xl text-primary-dark&quot;&gt;
            Something Went Wrong{&quot; &quot;}
            &lt;span role=&quot;img&quot; aria-label=&quot;sad face&quot;&gt;
              
            &lt;/span&gt;
          &lt;/h1&gt;
        &lt;/section&gt;
      );
    return (
      &lt;&gt;
        &lt;section
          className={`${
            isOpen ? &quot;col-start-2&quot; : &quot;col-start-1&quot;
          } col-end-3 row-start-3 row-end-4 text-white mx-6 my-12 lg:mx-12 overflow-hidden`}
        &gt;
          {data.length &gt; 0 ? (
            &lt;&gt;
              &lt;p className=&quot;text-primary-dark&quot;&gt;
                Query took:{&quot; &quot;}
                &lt;span className=&quot;font-bold&quot;&gt;{`${runtime.toFixed(2)} ms`}&lt;/span&gt;
              &lt;/p&gt;
              &lt;Table
                columns={columns}
                completeData={data}
                data={queryData}
                query={query}
              /&gt;
            &lt;/&gt;
          ) : (
            &lt;img src={Loader} className=&quot;w-20 mx-auto&quot; alt=&quot;loader&quot; /&gt;
          )}
        &lt;/section&gt;
      &lt;/&gt;
    );
  });
  
  export default TableSection;
  
  </code></pre>