title: Rendered fewer hooks than expected when using a react-redux translate function
body: <p>I get a <code>Rendered fewer hooks than expected. This may be caused by an accidental early return statement.</code> message when I'm using the following code:</p>
  
  <pre><code>{headRows
      // Filter table columns based on user selected input
      .filter(item =&gt; displayedColumns.includes(item.id))
      .map(row =&gt; (
        &lt;TableCell
          key={row.id}
          align={row.numeric ? "right" : "left"}
          padding={row.disablePadding ? "none" : "default"}
          sortDirection={orderBy === row.id ? order : false}
        &gt;
          &lt;TableSortLabel
            active={orderBy === row.id}
            direction={order}
            onClick={createSortHandler(row.id)}
          &gt;
            {useTranslation(row.label)}
          &lt;/TableSortLabel&gt;
        &lt;/TableCell&gt;
  ))}
  </code></pre>
  
  <p>My translate function looks like this:</p>
  
  <pre><code>import { useSelector } from "react-redux";
  
  export const useTranslations = () =&gt;
      useSelector(state =&gt; state.translations.data, []);
  </code></pre>
  
  <p>If I pass a string into it , the translate function is working as expected. However, if I replace <code>{useTranslation(row.label)}</code> with <code>{row.label}</code>, I don't receive the error message anymore. In my opinion I don't call Hooks inside loops, conditions, or nested functions here, or am I wrong?</p>