Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename React's SFC to 'FunctionalComponent' #30364

Merged
merged 5 commits into from Nov 10, 2018

Conversation

Projects
None yet
7 participants
@rhysforyou
Copy link
Contributor

commented Nov 8, 2018

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:

@typescript-bot

This comment has been minimized.

Copy link
Contributor

commented Nov 8, 2018

@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

This comment has been minimized.

Copy link
Contributor

commented Nov 8, 2018

@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!

@FredyC

This comment has been minimized.

Copy link
Contributor

commented Nov 8, 2018

@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

This comment has been minimized.

Copy link
Contributor Author

commented Nov 8, 2018

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

@typescript-bot typescript-bot moved this from Needs Author Attention to Waiting for Reviewers in Pull Request Status Board Nov 8, 2018

@typescript-bot typescript-bot moved this from Waiting for Reviewers to Needs Author Attention in Pull Request Status Board Nov 9, 2018

@typescript-bot

This comment has been minimized.

Copy link
Contributor

commented Nov 9, 2018

@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

This comment has been minimized.

Copy link
Contributor Author

commented Nov 9, 2018

All fixed up 😄

@typescript-bot typescript-bot moved this from Needs Author Attention to Waiting for Reviewers in Pull Request Status Board Nov 9, 2018

@johnnyreilly

This comment has been minimized.

Copy link
Member

commented Nov 9, 2018

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

This comment has been minimized.

Copy link
Contributor Author

commented Nov 10, 2018

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

@johnnyreilly

This comment has been minimized.

Copy link
Member

commented Nov 10, 2018

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

@Jessidhia

This comment has been minimized.

Copy link
Member

commented Nov 10, 2018

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

This comment has been minimized.

Copy link
Contributor Author

commented Nov 10, 2018

Oops, I’ll fix that up haha.

rhysforyou added some commits Nov 9, 2018

remove use of deprecated APIs
Revert "remove use of deprecated APIs"

This reverts commit 6bdf2ed.

remove use of deprecated APIs without reformatting
@rhysforyou

This comment has been minimized.

Copy link
Contributor Author

commented Nov 10, 2018

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 johnnyreilly merged commit ab11f1b into DefinitelyTyped:master Nov 10, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

Pau1fitz added a commit to Pau1fitz/reinspect that referenced this pull request Dec 5, 2018

Update SFC to FunctionComponent
Due to hooks function components can no longer be considered 'stateless', and according to our overlord Dan Abramov 🙏🏼 they should never have been called stateless 😁DefinitelyTyped/DefinitelyTyped#30364

Pau1fitz added a commit to Pau1fitz/reinspect that referenced this pull request Dec 5, 2018

Update StateInspector.tsx
Due to hooks, function components can no longer be considered 'stateless' 😁DefinitelyTyped/DefinitelyTyped#30364

Pau1fitz added a commit to Pau1fitz/reinspect that referenced this pull request Dec 5, 2018

Updated SFC to FC
Due to hooks, function components can no longer be considered 'stateless' 😁DefinitelyTyped/DefinitelyTyped#30364

@Pau1fitz Pau1fitz referenced this pull request Dec 5, 2018

Merged

✅Updated SFC to FC #1

Pau1fitz added a commit to Pau1fitz/react-redux-typescript-guide that referenced this pull request Dec 7, 2018

weswigham pushed a commit that referenced this pull request Dec 25, 2018

@KevinTCoughlin KevinTCoughlin referenced this pull request Jan 17, 2019

Merged

Add common Detail-Panel component #7685

1 of 2 tasks complete

piotrwitek added a commit to piotrwitek/react-redux-typescript-guide that referenced this pull request Jan 24, 2019

Sfc to fc (#124)
📖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

piotrwitek added a commit to piotrwitek/react-redux-typescript-guide that referenced this pull request Jan 24, 2019

Sfc to fc (#125)
* 📖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

@fumihumi fumihumi referenced this pull request Jan 27, 2019

Merged

Create elevator #50

nosajio added a commit to nosajio/vscode-react-typescript that referenced this pull request Feb 6, 2019

Replace deprecated React.SFC with React.FunctionComponent
React.SFC was deprecated as of React 16.7. More details can be found in
this PR: DefinitelyTyped/DefinitelyTyped#30364

@cheezenaan cheezenaan referenced this pull request Feb 26, 2019

Open

Migrate React to v16.8 #185

1 of 2 tasks complete
@Johnz86

This comment has been minimized.

Copy link

commented Mar 15, 2019

Renaming SFC to FC or to FunctionalComponent does not add any functional value.
From the authors perspective it is just more easy to understand.
This is breaking change for many people that are already using SFC.
This complicates migrations to future versions.

Please avoid deprecating stuff just for renaming reasons.
In my opinion both SFC and FC should be retained.

@rhysforyou rhysforyou deleted the rhysforyou:react-function-component branch Mar 15, 2019

@FredyC

This comment has been minimized.

Copy link
Contributor

commented Mar 15, 2019

@Johnz86 I believe it's a matter of consistency. It would be easy to confuse newcomer who would see SFC all over the place, starts asking what does that mean and "why is it stateless, I see useState" 😵 Not really worth going there imo.

It's a matter of a simple find & replace. Even for the huge codebase, it will take like a minute to migrate. So why are you so annoyed by it?

TrevorSayre added a commit to TrevorSayre/reactn that referenced this pull request Apr 21, 2019

Update README
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

@TrevorSayre TrevorSayre referenced this pull request Apr 21, 2019

Merged

Update README #61

CharlesStover added a commit to CharlesStover/reactn that referenced this pull request Apr 21, 2019

Functional -> Function
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

@loveky loveky referenced this pull request May 9, 2019

Open

update template project #30

@djhi djhi referenced this pull request May 15, 2019

Merged

[RFR] Reference hooks #3228

KunYi added a commit to KunYi/react-typescript that referenced this pull request May 20, 2019

Replace deprecated SFC syntax with FunctionComponent
visit DefinitelyTyped/DefinitelyTyped#30364
This PR renames React.SFC and React.StatelessComponent to
React.FunctionComponent, while introducing deprecated aliases
for the old names.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.