Rename React's SFC to 'FunctionalComponent' #30364

rhysforyou · 2018-11-08T04:51:08Z

Note: I'm reopening this as a new PR since #30188 was automatically closed while waiting for fixes to other React tests to merge.

This PR renames React.SFC and React.StatelessComponent to React.FunctionComponent, while introducing deprecated aliases for the old names. The motivation for this is twofold: firstly the addition of hooks means function components can have state, and secondly the term "stateless component" can equally apply to class components which don't use any state, causing some confusion.

Use a meaningful title for the pull request. Include the name of the package modified.
Test the change in your own code. (Compile and run.)
Add or edit tests to reflect the change. (Run with npm test.)
Follow the advice from the readme.
Avoid common mistakes.
Run npm run lint package-name (or tsc if no tslint.json is present).

If changing an existing definition:

Provide a URL to documentation or source code which provides context for the suggested changes:
- The hooks docs at https://reactjs.org/docs/hooks-state.html#hooks-and-function-components
  
  You might have previously known these as “stateless components”. We’re now introducing the ability to use React state from these, so we prefer the name “function components”.
- Dan Abramov's tweet on the subject https://twitter.com/dan_abramov/status/1057625147216220162
Increase the version number in the header if appropriate.
If you are making substantial changes, consider adding a tslint.json containing { "extends": "dtslint/dt.json" }.

typescript-bot · 2018-11-08T05:22:26Z

@rhysforyou Thank you for submitting this PR!

🔔 @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson @morcerf @tkrotoff @DovydasNavickas @onigoetz @theruther4d @guilhermehubner @ferdaber @jrakotoharisoa @pascaloliv @Hotell @franklixuefei @icopp - please review this PR in the next few days. Be sure to explicitly select Approve or Request Changes in the GitHub UI so I know what's going on.

If no reviewer appears after a week, a DefinitelyTyped maintainer will review the PR instead.

typescript-bot · 2018-11-08T05:22:27Z

@rhysforyou The Travis CI build failed! Please review the logs for more information.

Once you've pushed the fixes, the build will automatically re-run. Thanks!

danielkcz · 2018-11-08T21:00:36Z

@rhysforyou The PR ##30331 fixing all React tests failing has been merged so I recommend rebasing and it should be much easier to make tests passing here.

Also can you please add/change alias SFC to FC? I don't really like such a long name as FunctionComponent everywhere.

rhysforyou · 2018-11-08T21:23:04Z

I've rebased and added React.FC<P> as an alias to React.FunctionComponent<P>, let's see if this passes.

typescript-bot · 2018-11-09T07:25:04Z

@rhysforyou Unfortunately, this pull request currently has a merge conflict 😥. Please update your PR branch to be up-to-date with respect to master. Have a nice day!

rhysforyou · 2018-11-09T08:02:26Z

All fixed up 😄

johnnyreilly · 2018-11-09T08:25:32Z

Thanks - could you add a test for back compatibility please? I'd like to see evidence that works as otherwise this will be a very breaking change to the type definitions. Essentially all the tests that exist for StatelessComponent should stay in existence and pass as well as the new tests for FunctionComponent.

rhysforyou · 2018-11-10T01:25:30Z

@johnnyreilly done, I've added back tests that deal with the SFC type to ensure that those aliases work properly.

johnnyreilly · 2018-11-10T04:03:51Z

Looks good to me. @kovensky - does this look good to you?

Jessidhia · 2018-11-10T06:14:23Z

Looks good to me (can't use review UI as I'm on phone atm).

I see you also accidentally(?) ran Prettier on the code ;)

rhysforyou · 2018-11-10T06:17:35Z

Oops, I’ll fix that up haha.

Revert "remove use of deprecated APIs" This reverts commit 6bdf2ed. remove use of deprecated APIs without reformatting

rhysforyou · 2018-11-10T06:23:01Z

Nothing a little interactive rebasing couldn't fix. Assuming I didn't break anything between all those squashes and reverts, and this PR goes green, it should be ready to merge.

johnnyreilly · 2018-11-10T07:37:37Z

Thanks

amanmahajan7 · 2018-11-21T16:30:33Z

Is there a reason for releasing this change in a patch version? It is a breaking change and should probably have been released in a major version.

danielkcz · 2018-11-21T16:55:13Z

@amanmahajan7 What's breaking change? Old stuff is just deprecated, but it's still there. You have plenty of time for updating.

amanmahajan7 · 2018-11-21T16:56:41Z

Sorry I wasn't clear. May be it is a specific case and does not need a major bump but here is an example.

If the tsc compiler is generating definition files then after the upgrade the compiler generates files with React.FunctionComponent instead of React.SFC and if the consumer package is still using an older version of @types/react then it won't be able to consume those generated files

johnnyreilly · 2018-11-21T21:11:41Z

I'm afraid all type definition changes are potentially breaking - there is no semver. Details here:

https://blog.johnnyreilly.com/2018/09/ivan-drago-and-definitely-typed.html

Due to the deprecation of the Stateless function component. ref: DefinitelyTyped/DefinitelyTyped#30364

@Pau1fitz

📖Update to use FC and not SFC DefinitelyTyped/DefinitelyTyped#30364 By @Pau1fitz: * Initial work By @piotrwitek * rebase on master * Refactored all references related to SFC, stateless & stateful in favour of function and class components * Other minor improvements

* 📖Update to use FC and not SFC DefinitelyTyped/DefinitelyTyped#30364 * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Refactored all previous references related to SFC, stateless & stateful in favour of function and class components Other minor improvements

DefinitelyTyped/DefinitelyTyped#30364

* chore: upgrade react dependencies * chore: replace ReactDOM.render with createRoot in index.ts * chore: fix new TS errors after upgrading @types * chore: replace ReactDOM.render in Preview.tsx * chore: replace ReactDOM.unmountComponentAtNode with root.unmount() * chore: remove ReactDOM import * chore: upgrade react testing library * chore: replace deprecated React.SFC type with React.FC DefinitelyTyped/DefinitelyTyped#30364 * chore: Fix TS errors in propTypes.children propTypes.node results in TS errors. There doesn't seem to be a good alternative ( other than making the children propTypes more strict, which could result more errors) Instead use something less restrictive (propTypes.any) for children and components. * chore: fix TS errors, extract props interfaces with children * chore: fix TS errors, add context types * chore: TS fix * fix: Fix React unmount error Unmount asynchronously with setTimout https://stackoverflow.com/questions/73459382/react-18-async-way-to-unmount-root error message: Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition. * test: make wrapper unmount test async --------- Co-authored-by: Thomas Roest <thomas.roest@moxio.com>

Upgrade to React 18 * replace ReactDOM.render with createRoot in index.ts * fix new TS errors after upgrading @types * replace ReactDOM.render in Preview.tsx * replace ReactDOM.unmountComponentAtNode with root.unmount() * remove ReactDOM import * upgrade react testing library * replace deprecated React.SFC type with React.FC DefinitelyTyped/DefinitelyTyped#30364 * Fix TS errors in propTypes.children propTypes.node results in TS errors. There doesn't seem to be a good alternative ( other than making the children propTypes more strict, which could result more errors) Instead use something less restrictive (propTypes.any) for children and components. * fix TS errors, extract props interfaces with children * fix TS errors, add context types * TS fix * Fix React unmount error Unmount asynchronously with setTimout https://stackoverflow.com/questions/73459382/react-18-async-way-to-unmount-root error message: Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition. * make wrapper unmount test async --------- Co-authored-by: Thomas Roest <thomas.roest@moxio.com>

@Pau1fitz

📖Update to use FC and not SFC DefinitelyTyped/DefinitelyTyped#30364 By @Pau1fitz: * Initial work By @piotrwitek * rebase on master * Refactored all references related to SFC, stateless & stateful in favour of function and class components * Other minor improvements

* 📖Update to use FC and not SFC DefinitelyTyped/DefinitelyTyped#30364 * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Refactored all previous references related to SFC, stateless & stateful in favour of function and class components Other minor improvements

Use the term "function" instead of "functional" when referring to React function components. When hooks were introduced, SFC (Stateless Functional Component) was dropped in favor of FC (Function Component). With hooks, function components are no longer restricted to being stateless. The term "function" was adopted instead of "functional" since the latter implies Functional Programming paradigms such as pure functions, which is not a requirement of a function component. https://twitter.com/dan_abramov/status/1057625147216220162 DefinitelyTyped/DefinitelyTyped#30364

@Pau1fitz

📖Update to use FC and not SFC DefinitelyTyped/DefinitelyTyped#30364 By @Pau1fitz: * Initial work By @piotrwitek * rebase on master * Refactored all references related to SFC, stateless & stateful in favour of function and class components * Other minor improvements

* 📖Update to use FC and not SFC DefinitelyTyped/DefinitelyTyped#30364 * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Refactored all previous references related to SFC, stateless & stateful in favour of function and class components Other minor improvements

rhysforyou requested a review from johnnyreilly as a code owner November 8, 2018 04:51

typescript-bot added Popular package The Travis CI build failed labels Nov 8, 2018

typescript-bot added Awaiting reviewer feedback Has Merge Conflict and removed The Travis CI build failed labels Nov 8, 2018

rhysforyou added 3 commits November 9, 2018 18:37

renamed SFC to FunctionComponent

fb82755

more informative deprecation notice

2a4b424

add FC as an alias for FunctionComponent

97ca5a0

typescript-bot removed the Has Merge Conflict label Nov 9, 2018

rhysforyou added 2 commits November 10, 2018 17:21

remove use of deprecated APIs

116671c

Revert "remove use of deprecated APIs" This reverts commit 6bdf2ed. remove use of deprecated APIs without reformatting

add tests to ensure legacy aliases continue working

375695c

johnnyreilly merged commit ab11f1b into DefinitelyTyped:master Nov 10, 2018

0xPoe mentioned this pull request Mar 28, 2020

refactoring: replace deprecated React.SFC with React.FunctionComponent ant-design/ant-design#22691

Merged

14 tasks

doh98 mentioned this pull request Apr 27, 2020

Typescript + Redux + react-router piction-protocol/piction-web#126

Merged

This was referenced Jun 2, 2020

React 16.7 - React.SFC is now deprecated burkeholland/simple-react-snippets#40

Closed

refactor: SFC to FC burkeholland/simple-react-snippets#41

Merged

macrigiuseppe mentioned this pull request Jul 13, 2020

Add typescript types for upload modal and components keplergl/kepler.gl#1185

Merged

Golodhros mentioned this pull request Aug 5, 2020

chore: Deprecates React.SFC amundsen-io/amundsenfrontendlibrary#536

Merged

5 tasks

chibicode mentioned this pull request Aug 30, 2020

Update Custom App TypeScript docs to use React.SFC vercel/next.js#16702

Closed

stramel mentioned this pull request Nov 17, 2020

Code Updates doczjs/docz#1588

Merged

gendeld mentioned this pull request Nov 19, 2020

Fix generated types wix-incubator/svg2react-icon#34

Merged

Dogyunjeong mentioned this pull request Jan 10, 2021

Rename React.SFC type to React.FC due to React.SFC is deprecated burkeholland/simple-react-snippets#33

Closed

virtualvivek mentioned this pull request Jun 26, 2021

Improved Typescript Definitions virtualvivek/react-windows-ui#5

Closed

chandelieraxel mentioned this pull request Jul 22, 2021

chore: Updated React component typing artsy/fresnel#193

Merged

nuarhu mentioned this pull request Jun 2, 2022

Typescript compilation error with React 18 headzoo/react-moment#152

Closed

colebowl mentioned this pull request Jun 16, 2022

Fix deprecated type in React 18 jaredpalmer/formik#3547

Merged

tarnishablec mentioned this pull request Sep 15, 2022

Type mistake For "React.FC" clauderic/react-sortable-hoc#855

Open

penicillin0 mentioned this pull request Sep 20, 2022

typing.d.ts の React.StatelessComponent を React.FunctionComponent にする voyagegroup/ingred-ui#987

Closed

gogl92 mentioned this pull request Dec 11, 2022

SFC Function renamed hafeez1042/react-typescript-component-generator#1

Open

ThomasRoest pushed a commit to ThomasRoest/react-styleguidist that referenced this pull request Feb 9, 2023

chore: replace deprecated React.SFC type with React.FC

ab237d4

DefinitelyTyped/DefinitelyTyped#30364

ThomasRoest mentioned this pull request Feb 10, 2023

Upgrade to React 18 (#2087) styleguidist/react-styleguidist#2110

Merged

sabotatore mentioned this pull request Feb 2, 2024

fix(types): replace deprecated React.SFC type gpbl/react-day-picker#2049

Merged

9 tasks

Rename React's SFC to 'FunctionalComponent' #30364

Rename React's SFC to 'FunctionalComponent' #30364

Conversation

rhysforyou commented Nov 8, 2018

Uh oh!

typescript-bot commented Nov 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

typescript-bot commented Nov 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danielkcz commented Nov 8, 2018

Uh oh!

rhysforyou commented Nov 8, 2018

Uh oh!

typescript-bot commented Nov 9, 2018

Uh oh!

rhysforyou commented Nov 9, 2018

Uh oh!

johnnyreilly commented Nov 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rhysforyou commented Nov 10, 2018

Uh oh!

johnnyreilly commented Nov 10, 2018

Uh oh!

Jessidhia commented Nov 10, 2018

Uh oh!

rhysforyou commented Nov 10, 2018

Uh oh!

rhysforyou commented Nov 10, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

johnnyreilly commented Nov 10, 2018

Uh oh!

amanmahajan7 commented Nov 21, 2018

Uh oh!

danielkcz commented Nov 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

amanmahajan7 commented Nov 21, 2018

Uh oh!

johnnyreilly commented Nov 21, 2018

Uh oh!

typescript-bot commented Nov 8, 2018 •

edited

Loading

typescript-bot commented Nov 8, 2018 •

edited

Loading

johnnyreilly commented Nov 9, 2018 •

edited

Loading

rhysforyou commented Nov 10, 2018 •

edited

Loading

danielkcz commented Nov 21, 2018 •

edited

Loading