Pipe function + `React.memo` returns component with `any` props
See original GitHub issueTypeScript Version: 3.9.2
Search Terms: generic pipe pipeWith react memo HOC props any
Code
import * as React from 'react';
declare function pipeWith<A, B>(a: A, ab: (a: A) => B): B;
type Props = { foo: number };
declare const MyComponent: React.FunctionComponent<Props>;
// โ
correct props type
// React.NamedExoticComponent<Props>
const r1 = React.memo(MyComponent);
// โ `any` props type
// React.MemoExoticComponent<React.ComponentType<any>>
const r2 = pipeWith(MyComponent, React.memo);
// Workaround
// โ
correct props type
// React.NamedExoticComponent<Props>
const r3 = pipeWith(MyComponent, (C) => React.memo(C));
Using latest version of @types/react
(at the time of writing: 16.9.35).
Expected behavior:
See above.
Actual behavior:
See above.
Playground Link:
https://stackblitz.com/edit/react-ts-4ih6jn
Related Issues:
https://github.com/microsoft/TypeScript/issues/25637, although that was closed as a duplicate of an issue which has since been closed (https://github.com/microsoft/TypeScript/issues/10957), so I decided to post a new issue.
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
memo - React Docs
My component re-renders when a prop is an object, array, or function ... The memo does not modify this component, but returns a...
Read more >React.memo, useMemo, Lists (keys) | by Caio ... - Medium
It is worth saying that if a component receives a function as a prop, you need to use the useCallback hook, so that...
Read more >Use React.memo() wisely
Invokes the comparison function to determine whether the previous and next props are equal; Because props comparison almost always returns falseย ...
Read more >How to use the react.memo function in react - Snyk
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues...
Read more >When To Use React.memo() โ And When Not To | by Ellon
When React components are wrapped with React.memo(), React renders the component and memoizes the result. If the component's props are the sameย ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@RyanCavanaugh Hope this helps:
Playground Link
Just the presence of any overloads will confuse the inference on the original use case. Leave just the one signature and everything works as expected.
Iโm running into this all of the time, not just when using
React.memo
.Example using
Object.values
:Playground here.
Hereโs another example when using RxJS v7 (
7.0.0
). Iโve reduced the test case down further in this playground.