ForwardRefs supports propTypes #12911

bvaughn · 2018-05-25T22:41:31Z

Follow up to discussion on #12644

objects supports propTypes (and defaultProps, which already happened to work).
Add tests for defaultProps and failed propTypes warnings.
Split several internal-only ForwardRef tests off to be run against the built bundle also.

bvaughn · 2018-05-25T22:49:54Z

CI failure seems to be due to some (hopefully transient) Yarn registry problem. Not related to this PR.

Edit Seems like NPM just moved from Fastly to Cloudflare, and since Yarn is also using Cloudflare, it triggers a security error when Yarn forwards to NPM's registry. As a result, CI is going to be down for a bit until Yarn's fixed.

pull-bot · 2018-05-26T04:23:31Z

Details of bundled changes.

Comparing: f35d989...dfa3dc6

react

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react.development.js	+1.0%	+0.4%	57.2 KB	57.77 KB	15.89 KB	15.95 KB	UMD_DEV
react.development.js	+1.2%	+0.3%	47.84 KB	48.41 KB	13.55 KB	13.59 KB	NODE_DEV
React-dev.js	+1.3%	+0.6%	48.05 KB	48.67 KB	13.21 KB	13.28 KB	FB_WWW_DEV

Generated by 🚫 dangerJS

eemeli · 2018-05-26T09:33:50Z

packages/react/src/ReactElementValidator.js

-  const componentClass = element.type;
-  if (typeof componentClass !== 'function') {
+  const type = element.type;
+  let name, propTypes;


Shouldn't it be const propTypes = type.propTypes after the typeof type check, as that's the only value that it gets assigned?

The current approach avoids reading propTypes from a possible null or undefined value (although that shouldn't actually happen in practice). I don't think it's a problem as-is.

gaearon · 2018-05-29T13:12:42Z

packages/react/src/ReactElementValidator.js

+    ) {
+      const functionName =
+        element.type.render.displayName || element.type.render.name || '';
+      return functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef';


Does this look like getComponentName duplication here? Can we unify?

Yes, it's similar. But getComponentName accepts a Fiber and this is a ReactElement.

We could refactor both to use a shared helper, but it didn't seem like the obvious correct thing to do in this case.

gaearon · 2018-05-29T13:13:39Z

packages/react/src/ReactElementValidator.js

+  ) {
+    // ForwardRef
+    const functionName = type.render.displayName || type.render.name || '';
+    name = functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef';


Same here, I feel like this is getting out of hand a little bit. We're going to forget updating some of these.

getting out of hand a bit

😝

We often inline things rather than reuse them. I made a judgement call. I'm happy to change it if you think I should.

Write everything twice. This is three times. :-)
But I don't care strongly.

gaearon · 2018-05-29T13:14:58Z

packages/react/src/ReactElementValidator.js

+      element.type.$$typeof === REACT_FORWARD_REF_TYPE
+    ) {
+      const functionName =
+        element.type.render.displayName || element.type.render.name || '';


Let's hoist reading element.type so we don't keep repeating its reads?

gaearon

Thanks for splitting out the bundle tests.

I think it would be nice to avoid some repetition since we already have the "get name" logic in a helper. But not critical.

193: Update dependency react to v16.4.1 r=magopian a=renovate[bot] This Pull Request updates dependency [react](https://github.com/facebook/react) from `v16.4.0` to `v16.4.1` <details> <summary>Release Notes</summary> ### [`v16.4.1`](https://github.com/facebook/react/blob/master/CHANGELOG.md#1641-June-13-2018) [Compare Source](facebook/react@v16.4.0...v16.4.1) ##### React * You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@bvaughn] in [#12911](`https://github.com/facebook/react/pull/12911`)) ##### React DOM * Fix a crash when the input `type` changes from some other types to `text`. ([@spirosikmd] in [#12135](`https://github.com/facebook/react/pull/12135`)) * Fix a crash in IE11 when restoring focus to an SVG element. ([@ThaddeusJiang] in [#12996](`https://github.com/facebook/react/pull/12996`)) * Fix a range input not updating in some cases. ([@Illu] in [#12939](`https://github.com/facebook/react/pull/12939`)) * Fix input validation triggering unnecessarily in Firefox. ([@nhunzaker] in [#12925](`https://github.com/facebook/react/pull/12925`)) * Fix an incorrect `event.target` value for the `onChange` event in IE9. ([@nhunzaker] in [#12976](`https://github.com/facebook/react/pull/12976`)) * Fix a false positive error when returning an empty `<React.Fragment />` from a component. ([@philipp-spiess] in [#12966](`https://github.com/facebook/react/pull/12966`)) ##### React DOM Server * Fix an incorrect value being provided by new context API. ([@ericsoderberghp] in [#12985](`https://github.com/facebook/react/pull/12985`), [@gaearon] in [#13019](`https://github.com/facebook/react/pull/13019`)) ##### React Test Renderer * Allow multiple root children in test renderer traversal API. ([@gaearon] in [#13017](`https://github.com/facebook/react/pull/13017`)) * Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@fatfisz] in [#13030](`https://github.com/facebook/react/pull/13030`)) --- </details> --- This PR has been generated by [Renovate Bot](https://renovatebot.com). Co-authored-by: Renovate Bot <[email protected]>

25: Update react monorepo to v16.4.1 r=renovate[bot] a=renovate[bot] This Pull Request renovates the package group "react monorepo". - [react-dom](https://github.com/facebook/react) (`dependencies`): from `16.4.0` to `16.4.1` - [react](https://github.com/facebook/react) (`dependencies`): from `16.4.0` to `16.4.1` # Release Notes <details> <summary>facebook/react</summary> ### [`v16.4.1`](https://github.com/facebook/react/blob/master/CHANGELOG.md#1641-June-13-2018) [Compare Source](facebook/react@v16.4.0...v16.4.1) ##### React * You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@bvaughn] in [#12911](`https://github.com/facebook/react/pull/12911`)) ##### React DOM * Fix a crash when the input `type` changes from some other types to `text`. ([@spirosikmd] in [#12135](`https://github.com/facebook/react/pull/12135`)) * Fix a crash in IE11 when restoring focus to an SVG element. ([@ThaddeusJiang] in [#12996](`https://github.com/facebook/react/pull/12996`)) * Fix a range input not updating in some cases. ([@Illu] in [#12939](`https://github.com/facebook/react/pull/12939`)) * Fix input validation triggering unnecessarily in Firefox. ([@nhunzaker] in [#12925](`https://github.com/facebook/react/pull/12925`)) * Fix an incorrect `event.target` value for the `onChange` event in IE9. ([@nhunzaker] in [#12976](`https://github.com/facebook/react/pull/12976`)) * Fix a false positive error when returning an empty `<React.Fragment />` from a component. ([@philipp-spiess] in [#12966](`https://github.com/facebook/react/pull/12966`)) ##### React DOM Server * Fix an incorrect value being provided by new context API. ([@ericsoderberghp] in [#12985](`https://github.com/facebook/react/pull/12985`), [@gaearon] in [#13019](`https://github.com/facebook/react/pull/13019`)) ##### React Test Renderer * Allow multiple root children in test renderer traversal API. ([@gaearon] in [#13017](`https://github.com/facebook/react/pull/13017`)) * Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@fatfisz] in [#13030](`https://github.com/facebook/react/pull/13030`)) --- </details> --- This PR has been generated by [Renovate Bot](https://renovatebot.com). Co-authored-by: Renovate Bot <[email protected]>

Brian Vaughn added 2 commits May 25, 2018 15:02

Moved some internal forwardRef tests to not be internal

8f8b08a

ForwardRef supports propTypes

26e098f

bvaughn requested a review from gaearon May 25, 2018 22:41

bvaughn mentioned this pull request May 25, 2018

Add forwardRef DEV warning for prop-types on render function #12644

Merged

facebook-github-bot added the CLA Signed label May 25, 2018

eemeli reviewed May 26, 2018

View reviewed changes

gaearon reviewed May 29, 2018

View reviewed changes

gaearon approved these changes May 29, 2018

View reviewed changes

Hoisted type

dfa3dc6

bvaughn merged commit 83f76e4 into facebook:master May 29, 2018

bvaughn deleted the forwardRef-propTypes-support branch May 29, 2018 16:50

dependencies bot mentioned this pull request Oct 1, 2018

Update react-dom in /modules/frontend from 16.3.0 to 16.5.2 project-accelerate/accelerate#277

Open

dependencies bot mentioned this pull request Nov 1, 2018

Update react-dom in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#253

Closed

dependencies bot mentioned this pull request Nov 1, 2018

Update react in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#254

Closed

This was referenced Dec 1, 2018

Update react-test-renderer in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#312

Open

Update react in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#313

Open

eps1lon mentioned this pull request Dec 2, 2018

Fix hoisting of react statics between two forwardRef components mridgway/hoist-non-react-statics#71

Merged

jquense mentioned this pull request Mar 21, 2019

Add prop-types to RefForwarded Components DefinitelyTyped/DefinitelyTyped#34079

Closed

9 tasks

rpokorny mentioned this pull request Sep 12, 2019

[react] Add propTypes to ForwardRefExoticComponent DefinitelyTyped/DefinitelyTyped#38337

Merged

9 tasks

This was referenced Mar 15, 2021

chore(deps): bump react-dom from 16.4.0 to 16.4.2 in /intro-react-v5 samuelsilvadev/front-end-master-courses#9

Merged

Bump react-dom from 16.4.0 to 16.4.2 in /client cdhenry/pivot#1

Open

This was referenced Sep 5, 2024

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#65

Open

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#66

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ForwardRefs supports propTypes #12911

ForwardRefs supports propTypes #12911

bvaughn commented May 25, 2018

bvaughn commented May 25, 2018 •

edited

Loading

pull-bot commented May 26, 2018 •

edited

Loading

react

eemeli May 26, 2018

bvaughn May 26, 2018

gaearon May 29, 2018

bvaughn May 29, 2018

gaearon May 29, 2018

bvaughn May 29, 2018

gaearon May 29, 2018

gaearon May 29, 2018

gaearon left a comment

ForwardRefs supports propTypes #12911

ForwardRefs supports propTypes #12911

Conversation

bvaughn commented May 25, 2018

bvaughn commented May 25, 2018 • edited Loading

pull-bot commented May 26, 2018 • edited Loading

react

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon left a comment

Choose a reason for hiding this comment

bvaughn commented May 25, 2018 •

edited

Loading

pull-bot commented May 26, 2018 •

edited

Loading