title: I have this issue with my code Error: Rendered more hooks than during the previous render
body: <p>I am trying to make a table with the data I get from a graphql query and I am getting this error.
  I have tried several things that I have seen in posts on the internet but none of them have worked.</p>
  <blockquote>
  <p>Error: Rendered more hooks than during the previous render.</p>
  </blockquote>
  <p>My code is:</p>
  <p>Movie.js</p>
  <pre><code>  import { useTable, usePagination } from &quot;react-table&quot;;
  import { useMemo } from &quot;react&quot;;
  
  import { BiFirstPage, BiLastPage } from &quot;react-icons/bi&quot;;
  import { MdKeyboardArrowRight, MdKeyboardArrowLeft } from &quot;react-icons/md&quot;;
  
  import &quot;../styles.css&quot;
  
  import {gql, useQuery} from &quot;@apollo/client&quot;
  export const MOVIES_QUERY = gql `
  query Query {
    getAllMovies(limit: 50){
      directors
      title
      fullplot
      year
    }
  }
  `
  export function MoviesTable()  {
    const {data, error, loading, refetchQueries} = useQuery(MOVIES_QUERY,
      {fetchPolicy:&quot;cache-and-network&quot;,})
      if (loading) return (&lt;p&gt;Loading...&lt;/p&gt;);
   
    if (error) return (&lt;p&gt;Error :(&lt;/p&gt;);
    console.log(data)
    const movies = data?.getAllMovies
   console.log(movies)
    const columns = useMemo(()=&gt;[
      {
          Header: &quot;Titulo&quot;,
          accessor: &quot;titulo&quot;
        },
        {
            Header: &quot;Director&quot;,
            accessor: &quot;director&quot;
        },
        {
            Header: &quot;Año&quot;,
            accessor: &quot;year&quot;
        }
    ],[]);
    
    const rows = useMemo(()=&gt; movies.map(m =&gt; {return {titulo: m.title,director: m.directors,year: m.year, }}),[movies]);
    const table = useTable(
      {
        columns,
        rows,
        initialState: {
          pageSize: 10,
          pageIndex: 0
        }
      },
      usePagination
    );
  
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      prepareRow,
      page,
      canPreviousPage,
      canNextPage,
      pageOptions,
      pageCount,
      gotoPage,
      nextPage,
      previousPage,
      setPageSize,
      state: { pageIndex, pageSize }
    } = table;
    
    return (
      
      &lt;div className=&quot;container&quot;&gt;
        &lt;table {...getTableProps()}&gt;
          &lt;thead&gt;
            {
              // Loop over the header rows
              headerGroups.map((headerGroup) =&gt; (
                // Apply the header row props
                &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                  {
                    // Loop over the headers in each row
                    headerGroup.headers.map((column) =&gt; (
                      // Apply the header cell props
                      &lt;th {...column.getHeaderProps()}&gt;
                        {
                          // Render the header
                          column.render(&quot;Header&quot;)
                        }
                      &lt;/th&gt;
                    ))
                  }
                &lt;/tr&gt;
              ))
            }
          &lt;/thead&gt;
          {/* Apply the table body props */}
          &lt;tbody {...getTableBodyProps()}&gt;
            {
              // Loop over the table rows
              page.map((row) =&gt; {
                // Prepare the row for display
                prepareRow(row);
                return (
                  // Apply the row props
                  &lt;tr {...row.getRowProps()}&gt;
                    {
                      // Loop over the rows cells
                      row.cells.map((cell) =&gt; {
                        // Apply the cell props
                        return (
                          &lt;td {...cell.getCellProps()}&gt;
                            { cell.render(&quot;Cell&quot;) } 
                     
                          &lt;/td&gt;
                        );
                      })
                    }
                  &lt;/tr&gt;
                );
              })
            }
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;div className=&quot;pagination&quot;&gt;
          &lt;span&gt;
            Página&amp;nbsp;
            &lt;strong&gt;
              {pageIndex + 1} de {pageOptions.length}
            &lt;/strong&gt;{&quot; &quot;}
          &lt;/span&gt;
          &lt;div&gt;
            &lt;button onClick={() =&gt; gotoPage(0)} disabled={!canPreviousPage}&gt;
              &lt;BiFirstPage className=&quot;page-controller&quot; /&gt;
            &lt;/button&gt;{&quot; &quot;}
            &lt;button onClick={()=&gt; previousPage()} disabled={!canPreviousPage}&gt;
              &lt;MdKeyboardArrowLeft className=&quot;page-controller&quot; /&gt;
            &lt;/button&gt;{&quot; &quot;}
            &lt;button onClick={()=&gt; nextPage()} disabled={!canNextPage}&gt;
              &lt;MdKeyboardArrowRight className=&quot;page-controller&quot; /&gt;
            &lt;/button&gt;{&quot; &quot;}
            &lt;button
              onClick={()=&gt;gotoPage(pageCount - 1)}
              disabled={!canNextPage}
            &gt;
              &lt;BiLastPage className=&quot;page-controller&quot; /&gt;
            &lt;/button&gt;{&quot; &quot;}
          &lt;/div&gt;
          &lt;select
            value={pageSize}
            onChange={(e) =&gt; setPageSize(Number(e.target.value))}
          &gt;
            {[10, 15, 20, movies.length].map((pageSize) =&gt; (
              &lt;option key={pageSize} value={pageSize}&gt;
                {pageSize !== movies.length ? `Mostrar ${pageSize}` : `Mostrar todo`}
              &lt;/option&gt;
            ))}
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
      );
  }
  </code></pre>
  <p>Any advise is appreciated, thank you.</p>