How to type props in a React PureComponent using hooks in TypeScript?

Question

I want to convert a PureComponent to a memoized FunctionalComponent, so it only re-renders if the props change, even if the parent re-renders.

export class MyComp extends React.PureComponent<{param: string}> {
    public render() {
        return <div>{this.props.param}</div>;
    }
}

I want to change it so it's a functional component in order to use React Hooks.

export const MyComp: React.FC<{ param: string }> = useMemo(({param}) => {
    return <div>{param}</div>;
}, [param]);

But the above doesn't work and there are several problems:

1. The destructed param is type is any and not correctly inferred.
2. I can not pass [param] as the dependencies list for useMemo because it was not defined in this context.
3. 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?

Does it make more sense to have something like this?

export const MyComp: React.FC<{ param: string }> = (param) => {
    return useMemo((param) => {
        return <div>{param}</div>;
    }, [param]);
};

Is this component memoized correctly? What if we also have some internal state our data from store, will it re-render when those change?

export const MyComp: React.FC<{ param: string }> = (param) => {

    return useMemo((param) => {
        // Will it re-render when this changes even if it's memoized?
        const fromStore = useSelector((state: IState) => state.myValue));

        return <div>{param} {fromStore}</div>;
    }, [param]);
};

I don't think it will rerender if the store value changes. But in that case we would have to hoist fromStore outside useMemo, but doesn't this mean that the component is not pure anymore? As whenever the parent re-renders the MyComp function will run again (eg. compute fromStore value again).

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?

Answer 1

You are using the wrong method here, React.memo is the equivalent of React.PureComponent.

React.useMemo is used to memoize expensive computations inside a function component.

import React, { memo } from 'react'

type Props = {
  param: string
}

export const MyComp = memo(({ param }: Props) => (
  <div>{param}</div>
))

Also, many people prefer to not type components with React.FC, you can read why here