title: How to type props in a React PureComponent using hooks in TypeScript?
body: <p>I want to convert a <code>PureComponent</code> to a memoized <code>FunctionalComponent</code>, so it only re-renders if the props change, even if the parent re-renders.</p>
  
  <pre><code>export class MyComp extends React.PureComponent&lt;{param: string}&gt; {
      public render() {
          return &lt;div&gt;{this.props.param}&lt;/div&gt;;
      }
  }
  </code></pre>
  
  <p>I want to change it so it's a functional component in order to use <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow noreferrer">React Hooks</a>.</p>
  
  <pre><code>export const MyComp: React.FC&lt;{ param: string }&gt; = useMemo(({param}) =&gt; {
      return &lt;div&gt;{param}&lt;/div&gt;;
  }, [param]);
  </code></pre>
  
  <p>But the above doesn't work and there are several problems:  </p>
  
  <ol>
  <li>The destructed <code>param</code> is type is <code>any</code> and not correctly inferred.</li>
  <li>I can not pass <code>[param]</code> as the dependencies list for <code>useMemo</code> because it was not defined in this context.  </li>
  <li>There seems to be no way to set the type of the parameters in the dependencies list. Is this because the parameters are just variables from the parent scope and not actual arguments that are passed in? If yes, how can we export a pure component if we don't know what props will be passed in?</li>
  </ol>
  
  <p>Does it make more sense to have something like this?</p>
  
  <pre><code>export const MyComp: React.FC&lt;{ param: string }&gt; = (param) =&gt; {
      return useMemo((param) =&gt; {
          return &lt;div&gt;{param}&lt;/div&gt;;
      }, [param]);
  };
  </code></pre>
  
  <p>Is this component memoized correctly? What if we also have some internal state our data from store, will it re-render when those change?</p>
  
  <pre><code>export const MyComp: React.FC&lt;{ param: string }&gt; = (param) =&gt; {
  
      return useMemo((param) =&gt; {
          // Will it re-render when this changes even if it's memoized?
          const fromStore = useSelector((state: IState) =&gt; state.myValue));
  
          return &lt;div&gt;{param} {fromStore}&lt;/div&gt;;
      }, [param]);
  };
  </code></pre>
  
  <p>I don't think it will rerender if the store value changes. But in that case we would have to hoist <code>fromStore</code> outside <code>useMemo</code>, but doesn't this mean that the component is not pure anymore? As whenever the parent re-renders the <code>MyComp</code> function will run again (eg. compute <code>fromStore</code> value again).</p>
  
  <p>I do like working with hooks, but their functionality and implementation is a bit abstract. What's the correct way of implementing a typed pure component with hooks?</p>