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 ponent 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 ponent 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 ponent 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 ponent is not pure anymore? As whenever the parent re-renders the MyComp function will run again (eg. pute 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 ponent with hooks?

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 ponent 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 ponent 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 ponent 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 ponent is not pure anymore? As whenever the parent re-renders the MyComp function will run again (eg. pute 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 ponent with hooks?

• javascript
• reactjs
• typescript
• react-hooks
• react-ponent

Share Follow edited Feb 29, 2020 at 11:26 XCS asked Feb 29, 2020 at 11:20 XCSXCS 28.2k2828 gold badges104104 silver badges153153 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

React.useMemo is used to memoize expensive putations inside a function ponent.

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 ponents with React.FC, you can read why here