profile
viewpoint
Dan Abramov gaearon @facebook http://twitter.com/dan_abramov Working on @reactjs. Co-author of Redux and Create React App. Building tools for humans.

acdlite/redux-router 2340

Redux bindings for React Router – keep your router state inside your Redux store

gaearon/babel-plugin-react-transform 1099

Babel plugin to instrument React components with custom transforms

bvaughn/react-devtools-experimental 973

Experimental rewrite of the React DevTools extension

alexkuz/react-json-tree 936

React JSON Viewer Component, Extracted from redux-devtools

gaearon/ama 219

Ask me anything!

cavinsmith/bdsm.js 55

Background Dominant Stripe Manipulator

acdlite/react 19

A declarative, efficient, and flexible JavaScript library for building user interfaces.

gaearon/awesome-create-react-app 15

Awesome list of Create React App articles / tutorials / videos and FAQ

push eventreactjs/reactjs.org

Dan Abramov

commit sha df492156d3c3c2cf135cd14c728ccd01fb6329a4

Add redirect from old blog post url (#2784) * Add redirect from old blog post url * Update 2020-02-26-react-v16.13.0.md

view details

push time in 8 hours

PR merged reactjs/reactjs.org

Add redirect from old blog post url CLA Signed react core team

https://github.com/reactjs/reactjs.org/pull/2782 broke the old link which might get cached in RSS clients etc. Maybe this works as an easy fix.

+2 -0

1 comment

1 changed file

gaearon

pr closed time in 8 hours

push eventreactjs/reactjs.org

Dan Abramov

commit sha 861990e6fc62865d632014e74dbfcc9fd370a35f

Update 2020-02-26-react-v16.13.0.md

view details

push time in 8 hours

PR opened reactjs/reactjs.org

Add redirect from old blog post url

https://github.com/reactjs/reactjs.org/pull/2782 broke the old link which might get cached in RSS clients etc. Maybe this works as an easy fix.

+2 -0

0 comment

1 changed file

pr created time in 8 hours

create barnchreactjs/reactjs.org

branch : gaearon-patch-2

created branch time in 8 hours

pull request commentreactjs/reactjs.org

fix 16.13 blog post date

This broke links. We should leave a redirect for such cases.

threepointone

comment created time in 8 hours

pull request commentfacebook/react

Replace ReactShallowRenderer with a dependency

I think this looks good. I’ll check tomorrow.

NMinhNguyen

comment created time in 8 hours

Pull request review commentfacebook/react

Replace ReactShallowRenderer with a dependency

  * @flow  */ -export {default} from './src/ReactShallowRenderer';

Don't forget to delete the impl :-)

NMinhNguyen

comment created time in 8 hours

push eventfacebook/react

Dan Abramov

commit sha 849e8328b596ce67720f33d73a1d57108e6de504

Remove unnecessary warnings (#18135)

view details

push time in 8 hours

PR merged facebook/react

Remove unnecessary warnings CLA Signed React Core Team

These don't seem particularly useful anymore.

  • Shady DOM: too niche
  • setState in getChildContext: too niche and lets us simplify some spread out code
  • maxDuration: gone, never stable
+31 -195

3 comments

9 changed files

gaearon

pr closed time in 8 hours

pull request commentfacebook/react

Fix onMouseEnter is fired on disabled buttons

Can you please file a new issue to discuss?

AlfredoGJ

comment created time in 8 hours

Pull request review commentfacebook/react

Replace ReactShallowRenderer with a dependency

  'use strict'; -const ReactShallowRenderer = require('./src/ReactShallowRenderer');--// TODO: decide on the top-level export form.-// This is hacky but makes it work with both Rollup and Jest.-module.exports = ReactShallowRenderer.default || ReactShallowRenderer;+export {default} from 'react-shallow-renderer';

So what does this do? Is it using an actual ES build? Is this relying on the module field? @sebmarkbage Didn't you have concern about doing this?

NMinhNguyen

comment created time in 8 hours

Pull request review commentfacebook/react

Replace ReactShallowRenderer with a dependency

  'use strict'; -let createRenderer;-let React;-let ReactDOM;-let ReactDOMServer;-let ReactTestUtils;+import ReactShallowRenderer from 'react-test-renderer/shallow';

Rebase on master to get this change?

NMinhNguyen

comment created time in 8 hours

CommitCommentEvent
CommitCommentEvent

pull request commentfacebook/react

Replace ReactShallowRenderer with a dependency

Blocks are an experiment and definitely don't make sense in the context of shallow rendering. So feel free to ignore them.

NMinhNguyen

comment created time in 8 hours

pull request commentfacebook/react

Replace ReactShallowRenderer with a dependency

To avoid the versioning awkwardness, we can make it 20.0.0 and pretend this never happened.

NMinhNguyen

comment created time in 9 hours

Pull request review commentfacebook/react

Convert the rest of react-dom and react-test-renderer to Named Exports

  * @flow  */ -'use strict';--const ReactShallowRenderer = require('./src/ReactShallowRenderer');--// TODO: decide on the top-level export form.-// This is hacky but makes it work with both Rollup and Jest.-module.exports = ReactShallowRenderer.default || ReactShallowRenderer;+export {default} from './src/ReactShallowRenderer';

🤯 I had no idea

sebmarkbage

comment created time in 9 hours

Pull request review commentfacebook/react

Convert the rest of react-dom and react-test-renderer to Named Exports

  'use strict'; -let createRenderer;-let React;-let ReactDOM;-let ReactDOMServer;-let ReactTestUtils;+import ReactTestRenderer from 'react-test-renderer/shallow';+import * as React from 'react';+import * as ReactDOM from 'react-dom';+import * as ReactDOMServer from 'react-dom/server';+import * as ReactTestUtils from 'react-dom/test-utils';

OK I see now, we only do this where we import ReactShallowRenderer.

sebmarkbage

comment created time in 9 hours

Pull request review commentfacebook/react

Convert the rest of react-dom and react-test-renderer to Named Exports

  * @flow  */ -'use strict';--const ReactShallowRenderer = require('./src/ReactShallowRenderer');--// TODO: decide on the top-level export form.-// This is hacky but makes it work with both Rollup and Jest.-module.exports = ReactShallowRenderer.default || ReactShallowRenderer;+export {default} from './src/ReactShallowRenderer';

Isn't this gonna break const ShallowRenderer = require('react-test-renderer/shallow')? Is this not a breaking change?

sebmarkbage

comment created time in 9 hours

Pull request review commentfacebook/react

Convert the rest of react-dom and react-test-renderer to Named Exports

 function getMaskedContext(contextTypes, unmaskedContext) {   return context; } +// This should probably be a default export and a named export.

I don't understand what this comment is saying. Which one should it be?

sebmarkbage

comment created time in 9 hours

Pull request review commentfacebook/react

Convert the rest of react-dom and react-test-renderer to Named Exports

  'use strict'; -let createRenderer;-let React;-let ReactDOM;-let ReactDOMServer;-let ReactTestUtils;+import ReactTestRenderer from 'react-test-renderer/shallow';

Okay this is what confused me. It should say ReactShallowRenderer.

sebmarkbage

comment created time in 9 hours

pull request commentfacebook/react

Option to use devtools with csp

Can we link to some way for the person to verify the hash actually matches our code?

ruslan-shuster

comment created time in 9 hours

Pull request review commentfacebook/react

Convert the rest of react-dom and react-test-renderer to Named Exports

  'use strict'; -let createRenderer;-let React;-let ReactDOM;-let ReactDOMServer;-let ReactTestUtils;+import ReactTestRenderer from 'react-test-renderer/shallow';+import * as React from 'react';+import * as ReactDOM from 'react-dom';+import * as ReactDOMServer from 'react-dom/server';+import * as ReactTestUtils from 'react-dom/test-utils';

What's special about this file? Why didn't you have to convert all other tests importing TestUtils or ReactDOMServer to use imports?

sebmarkbage

comment created time in 9 hours

Pull request review commentfacebook/react

Convert the rest of react-dom and react-test-renderer to Named Exports

  'use strict'; -let createRenderer;-let React;-let ReactDOM;-let ReactDOMServer;-let ReactTestUtils;+import ReactTestRenderer from 'react-test-renderer/shallow';+import * as React from 'react';+import * as ReactDOM from 'react-dom';+import * as ReactDOMServer from 'react-dom/server';+import * as ReactTestUtils from 'react-dom/test-utils';

Huh?

sebmarkbage

comment created time in 9 hours

Pull request review commentfacebook/react

Replace ReactShallowRenderer with a dependency

     "object-assign": "^4.1.1",     "prop-types": "^15.6.2",     "react-is": "^16.8.6",+    "react-shallow-renderer": "^16.12.0",

A bit unfortunate we didn't start with 1.0.0 or similar. So that you could break it more often if necessary. Although I guess nothing prevents you from jumping to 17 later without waiting for us.

NMinhNguyen

comment created time in 9 hours

pull request commentfacebook/react

Replace ReactShallowRenderer with a dependency

To be fair, adding support for new component types (if even desired) will be a more likely blocker than non-ideal getComponentName names. I don't even think getComponentName is that useful when the stack is almost flat.

NMinhNguyen

comment created time in 9 hours

PR closed facebook/react

Hydration warnings with DOM diff in react-reconciler (#10085) CLA Signed

An attempt to implement the hydration warning and DOM diff in react-reconciler package as requested by @gaearon here: https://github.com/facebook/react/pull/12063#pullrequestreview-142612751

What would diffing look like if it was implemented in the reconciler? Feel free to change host config API if necessary — the goal is that all hydratable renderers would get nice warnings, not just DOM.

The tests and fixtures were copied from the original PR: https://github.com/facebook/react/pull/12063 and slightly modified (see my review below).

+2821 -389

23 comments

19 changed files

sompylasar

pr closed time in 13 hours

pull request commentfacebook/react

Hydration warnings with DOM diff in react-reconciler (#10085)

Thanks a lot for exploring this. The scope ended up being larger than we expected, and we ended up with a simpler (although perhaps less precise) solution: https://github.com/facebook/react/issues/10085#issuecomment-591650861. But this was still a very useful exploration.

sompylasar

comment created time in 13 hours

issue closedfacebook/react

Nicer Formatting of SSR Validation

The new validation in #10026 only issues a warn for the first difference found in a HTML hydration scenario. Ideally it should instead queue up all the differences and then at the end (commit) issue a single warning with a nicely formatted diff.

  1. Instead of warning add these warn calls to a global buffer (array, map, set, whatever).

  2. Inside prepareForCommit, issue all the currently batched up warnings as a single message.

  3. Format that message in terms of a JSX diff in a nicely formatted way. With only the relevant nodes (parent and child with changes). Irrelevant child content can be replaced with ellipsis. E.g.

...
<div className="unchanged">
- <div className="foo" />
+ <div className="bar">…</div>
+ <span />
</div>
...
<div className="another_unchanged">
- <span />
</div>
...

This strategy won't yield perfect results because if we're asynchronously hydrating, and it gets interrupted by another tree, we'll flush a warning before the actual hydrating particular tree is flushed. So we might show a partial diff in that case. This is probably. It's just a warning.

closed time in 13 hours

sebmarkbage

issue commentfacebook/react

Nicer Formatting of SSR Validation

We didn't end up doing precisely this. However, we did add component stacks to hydration warnings in React 16.13: https://reactjs.org/blog/2020/03/02/react-v16.13.0.html#component-stacks-in-hydration-warnings

That should get you most of the way there. They might still be occasionally misleading because the problem might be in one of the parent components rendering something unexpected. But they're much better than nothing. I think we can close this as other solutions are too complex.

sebmarkbage

comment created time in 13 hours

issue closedfacebook/react

Bug: [Sync mode] Effects are not re-run after suspense completes

As reported in #14536, React mounts suspended components to the DOM with display:none and fires effects before the components are visible. Once suspense has completed, effects are not re-run. This means that any component that reads layout info from the DOM becomes visible with content based on a stale layout.

React version: 16.12.0

Steps To Reproduce

  1. Create a component that reads layout info from the DOM
  2. Render that component in a suspense alongside a lazy component

Link to code example: https://codesandbox.io/s/busy-jang-75wmf

The current behavior

The layout-dependent component is rendered incorrectly based on when it was still invisible.

The expected behavior

The layout-dependent component should render correctly regardless of whether or not siblings are lazy and caused suspense.

closed time in 13 hours

1000hz

issue commentfacebook/react

React.Suspense provide a lifecycle so components can handle the `display:none` removal

See my reply here: https://github.com/facebook/react/issues/18141#issuecomment-591648972.

oliviertassinari

comment created time in 13 hours

issue commentfacebook/react

Bug: [Sync mode] Effects are not re-run after suspense completes

My understanding is that this is not possible to fix in the legacy (ReactDOM.render) mode. Sorry. It's a quirk of the legacy mode which we can't fix without introducing other breaking changes.

This is solved in Blocking Mode and Concurrent Mode, but they are only available in experimental releases.

1000hz

comment created time in 13 hours

issue closedfacebook/react

Bug: eslint-plugin-react-hooks@2.4.0: Doesn't allow to use quick fix for exhaustive deps in Inteliji IDEs

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. -->

React version: 16 eslint-plugin-react-hooks: 2.4.0

Steps To Reproduce

  1. Install yarn add -D eslint-plugin-react-hooks
  2. Run IDE (I tried WebStorm and RubyMine)
  3. Do an exhaustive deps error:
function Component(props) {
    useEffect(() => {
        console.log(props.a);
    }, []);
}
  1. Observe Webstorm quick fix hint allows only to suppress error pressing control+shift+enter with // eslint-disable-next-line react-hooks/exhaustive-deps image
  2. Remove yarn remove eslint-plugin-react-hooks
  3. Add yarn add -D eslint-plugin-react-hooks@2.3.0
  4. Restart WebStorm
  5. Objserve quick fix hint is shown and error can be fixed with control+shift+enter image

<!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. -->

Link to code example: unavailable

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. --> I know it's a weird issue and I have no knowledge where WebStorm or RubyMine take hints for quick fixes, but it's an extremely neat thing once you get used to it. And it looks like some changes introduced in 2.4.0 broke the contract.

closed time in 13 hours

oziniak

issue commentfacebook/react

Bug: eslint-plugin-react-hooks@2.4.0: Doesn't allow to use quick fix for exhaustive deps in Inteliji IDEs

This is not a bug. We changed it from autofix to use the ESLint Suggestions API (new in ESLint 6.7) due to common complaints. So IntelliJ needs to implement support for ESLint Suggestions API for this to work again. See here: https://github.com/facebook/react/issues/16313#issuecomment-587149109.

cc @prigara Can you route this? Shouldn't be a lot of work.

oziniak

comment created time in 13 hours

issue closedfacebook/react

Bug: eslint-plugin-react-hooks React Hook cannot be called inside a callback.

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. -->

React version:

Steps To Reproduce

function App(){
   return (
    <div >
      {
        (() => {
          const [item, itemSET] = useState('1')
          return <>
            {item}
          </>
        })()
      }
    </div>
}

<!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. -->

Link to code example:

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. -->

The current behavior

eslint will tell 'React Hook "useState" cannot be called inside a callback.'

The expected behavior

No error

closed time in 13 hours

zhangenming

issue commentfacebook/react

Bug: eslint-plugin-react-hooks React Hook cannot be called inside a callback.

This is intentional. Only call Hooks at the top level. The pattern you're relying on is dangerous because there is no guarantee the code will only be called once and unconditionally.

zhangenming

comment created time in 13 hours

issue closedfacebook/react

Bug: ENOTFOUND -3008 on react-scripts start without root permissions

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. -->

When I try to run react-scripts start in a react project the command crashes immediately. If I run it with root permissions then the command just succeeds and works as expected. Running with sudo every time is quite boring. It also messes up my nvm environment and doesn't let me use my IDE debugger.

React version: 16.12.0

Steps To Reproduce

  1. Run $ npx create-react-app hello-world
  2. Run $ cd hello-world
  3. Run $ npm start or $ react-scripts start (If ran with sudo it just works)
  4. Face the crash

Since this is a platform specific issue, I'm leaving all the important specifications here: Please ask if you need some other information

  • OS: OpenSUSE Tumbleweed 20200214
  • Kernel Version: linux 5.5.4 (I'm facing this issue for months actually, so previous versions are included)
  • Bash Version: GNU bash, version 5.0.11(1)-release (x86_64-suse-linux-gnu)
  • Node Version: v10.16.1 (Tested with several major versions, including v9, v10, v12, v13)
  • My $ env (separated GIST because Its pretty long): https://gist.github.com/NathanPB/18861c712b22ad392e172bc3388a575a

I don't now if that's important, but I use nvm to manage the node installations

<!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. -->

Link to code example: Not Applicable

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. -->

The current behavior

It crashes with the following output:

nathan@linux-kpfq: ~/Projects/hello-world> react-scripts start
Attempting to bind to HOST environment variable: linux-kpfq
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://bit.ly/CRA-advanced-config

events.js:196
      throw er; // Unhandled 'error' event
      ^

Error: getaddrinfo ENOTFOUND linux-kpfq
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:64:26)
Emitted 'error' event on Server instance at:
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1492:12)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:64:17) {
  errno: -3008,
  code: 'ENOTFOUND',
  syscall: 'getaddrinfo',
  hostname: 'linux-kpfq'
}

The expected behavior

The command should run without needing root permissions.

closed time in 13 hours

NathanPB

issue commentfacebook/react

Bug: ENOTFOUND -3008 on react-scripts start without root permissions

Please file this in https://github.com/facebook/create-react-app/.

NathanPB

comment created time in 13 hours

pull request commentfacebook/react

[FIX] - ReactDOM Add back version property to client

Out in 16.13

ealush

comment created time in 13 hours

issue commentfacebook/react

mouseenter fires on disabled inputs whereas mouseleave does not

Should be fixed in 16.13. https://reactjs.org/blog/2020/03/02/react-v16.13.0.html

If not please create a new issue with a reproducing example.

jquense

comment created time in 13 hours

issue closedfacebook/react

mouseenter fires on disabled inputs whereas mouseleave does not

There is an asymmetry to EnterLeave event plugin. Since mouseenter is created from the relativeTarget of the mouseout event it fires even though the target is disabled. Since the mouseleave is the inverse, i.e requires that the disabled element fire a mouseout, it doesn't fire a mouseleave for the disabled element.

I am pretty sure the correct behavior here is that neither event should fire if its target is disabled, since this mirrors mouseout. No idea if none-chrome browsers have the same behavior for which mouse events fire on disabled elements.

Additional caveat I just realized, React is probably also not firing mousenter events in the case where the mouse leaves a disabled element into a non disabled element

closed time in 13 hours

jquense

issue closedfacebook/react

onMouseEnter is fired on disabled buttons

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug?

bug

What is the current behavior?

onMouseEnter is fired on disabled buttons.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/react-onmouseenter-on-disabled-buttons-fskwd

What is the expected behavior?

onMouseEnter shouldn't be triggered on disabled buttons.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.11.0 (not sure when it started to happen) Chrome/MacOS

closed time in 13 hours

diegohaz

issue commentfacebook/react

onMouseEnter is fired on disabled buttons

Should be fixed in 16.13. https://reactjs.org/blog/2020/03/02/react-v16.13.0.html

diegohaz

comment created time in 13 hours

push eventfacebook/react

Dan Abramov

commit sha 69c769ae049aa72a434a34ad7f559b801270725a

Fix changelog link

view details

push time in 13 hours

issue commentfacebook/react

Warn when using overlapping styles (e.g. border and borderBottom)

The warning is out in 16.13. https://reactjs.org/blog/2020/03/02/react-v16.13.0.html

gaearon

comment created time in 13 hours

pull request commentfacebook/react

Warn about conflicting style values during updates

This is out in 16.13. https://reactjs.org/blog/2020/03/02/react-v16.13.0.html

sophiebits

comment created time in 13 hours

push eventfacebook/react

Dan

commit sha efaffc4797014d3b468e8f3c64c326f078a22c5d

Prettier

view details

push time in 13 hours

push eventreactjs/reactjs.org

Dan Abramov

commit sha 7f569862432bdeac666c86c3aa2dcf3f2830784b

Fix wrong version

view details

push time in 14 hours

issue openedfacebook/create-react-app

Wrap in StrictMode by default

The default template should wrap App into <React.StrictMode>. The ecosystem is mostly ready, and it's time to make a move in this direction before it becomes more prominent in future React versions.

created time in 14 hours

push eventthreepointone/reactjs.org

Dan Abramov

commit sha f3d9fd1fca652ae16ceeded6c57021dae6edce86

Update 2020-03-02-react-v16.13.0.md

view details

push time in 15 hours

push eventthreepointone/reactjs.org

Dan Abramov

commit sha df3efef67672d3949cc35f768f6e0487de84e3b1

Tweak

view details

push time in 15 hours

issue commentfacebook/react

[Umbrella] Releasing Suspense

We provided an experimental release back in October: https://reactjs.org/docs/concurrent-mode-intro.html. This is the same build we're running in production. There's still more work to do (both in terms of tweaking the API and building higher-level APIs) but you can start playing with it if you want.

acdlite

comment created time in 16 hours

pull request commentfacebook/react

Add useOpaqueReference Hook

Let's not forget to add a DevTools regression test like in https://github.com/facebook/react/pull/18130.

lunaruan

comment created time in 16 hours

pull request commentfacebook/react

Update ReactDebugHooks to handle composite hooks

I think Seb meant to drop a line on the PR so we don't forget to address before merging it.

bvaughn

comment created time in 16 hours

PR opened facebook/react

Remove unnecessary warnings

These don't particularly useful anymore.

  • Shady DOM: too niche
  • setState in getChildContext: too niche and lets us simplify some spread out code
  • maxDuration: gone, never stable
+31 -195

0 comment

9 changed files

pr created time in a day

create barnchgaearon/react

branch : wrn-clnup

created branch time in a day

pull request commentfacebook/react

Add a flag to disable module pattern components

We can probably even hard-break in both WWW builds.

gaearon

comment created time in a day

PR opened facebook/react

Add a flag to disable module pattern components

This was already very niche and the warning doesn't fire on WWW. Let's disable these completely in the modern WWW build and stop doing these three checks for every element returned from a function?

+13 -0

0 comment

10 changed files

pr created time in a day

create barnchgaearon/react

branch : add-indet-flag

created branch time in a day

PR opened facebook/react

Remove unused flag

This is always true.

+1 -23

0 comment

10 changed files

pr created time in a day

create barnchgaearon/react

branch : const-flag

created branch time in a day

push eventgaearon/react

Dan Abramov

commit sha af4ef41146da9fdc60e0ab319a9bd6fc462812d2

Fix test

view details

push time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.++### Deprecating `React.createFactory`++[`React.createFactory`](https://reactjs.org/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method, and will be removed in a future major version. Replace usages of `React.createFactory` with regular JSX.++### Other warnings++- When dynamically changing `style` on a dom element, it's sometimes possible that the applied style clashes with a previously set style, resulting in a badly styled element. React now detects this pattern and logs a warning. The workaround is to pass the same object 'shape' to `style` everytime. ++- The content of a `<textarea>` element should be passed as `value` or `defaultValue` props. An older pattern was to pass `children` to the `<textarea>` element. This release adds a warning for this usage, and support for this will be removed in the next major version.++### Notable bugfixes++This release contains a few other notable improvements:++- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.++- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the component that actually triggered the warning. This release adds the first component stack to the warning.

They did include the component, but didn't include the stack.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.

A React render function is supposed to be a pure function.

This might invite purists to debate Hooks.

Maybe something like:

A React component should not cause side effects in other components during rendering.

?

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. 

Add "It must only be enabled in development mode."

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.++### Deprecating `React.createFactory`++[`React.createFactory`](https://reactjs.org/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method, and will be removed in a future major version. Replace usages of `React.createFactory` with regular JSX.++### Other warnings++- When dynamically changing `style` on a dom element, it's sometimes possible that the applied style clashes with a previously set style, resulting in a badly styled element. React now detects this pattern and logs a warning. The workaround is to pass the same object 'shape' to `style` everytime. ++- The content of a `<textarea>` element should be passed as `value` or `defaultValue` props. An older pattern was to pass `children` to the `<textarea>` element. This release adds a warning for this usage, and support for this will be removed in the next major version.++### Notable bugfixes++This release contains a few other notable improvements:++- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.++- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the component that actually triggered the warning. This release adds the first component stack to the warning.++- Further, this release adds a component stack to a number of warnings that previously didn't include one.

Maybe we want to call out stacks for hydration warnings? People have been asking for them for a long time. I would even include a separate section with a screenshot.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.

Too much jargon IMO:

Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.

Suggestion:

In the future, we will provide an automated script (a “codemod”) to migrate away from String Refs. We are enabling this warning first so that you can fix the cases that can’t be safely converted by the codemod.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.++### Deprecating `React.createFactory`++[`React.createFactory`](https://reactjs.org/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method, and will be removed in a future major version. Replace usages of `React.createFactory` with regular JSX.++### Other warnings++- When dynamically changing `style` on a dom element, it's sometimes possible that the applied style clashes with a previously set style, resulting in a badly styled element. React now detects this pattern and logs a warning. The workaround is to pass the same object 'shape' to `style` everytime. ++- The content of a `<textarea>` element should be passed as `value` or `defaultValue` props. An older pattern was to pass `children` to the `<textarea>` element. This release adds a warning for this usage, and support for this will be removed in the next major version.++### Notable bugfixes++This release contains a few other notable improvements:++- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.++- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the component that actually triggered the warning. This release adds the first component stack to the warning.++- Further, this release adds a component stack to a number of warnings that previously didn't include one.++- `onMouseEnter` now correctly gets triggered on disabled `<button>` elements.

"gets triggered" or "doesn't get triggered"? I'm not sure this matches the behavior.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.++### Deprecating `React.createFactory`++[`React.createFactory`](https://reactjs.org/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method, and will be removed in a future major version. Replace usages of `React.createFactory` with regular JSX.++### Other warnings++- When dynamically changing `style` on a dom element, it's sometimes possible that the applied style clashes with a previously set style, resulting in a badly styled element. React now detects this pattern and logs a warning. The workaround is to pass the same object 'shape' to `style` everytime. ++- The content of a `<textarea>` element should be passed as `value` or `defaultValue` props. An older pattern was to pass `children` to the `<textarea>` element. This release adds a warning for this usage, and support for this will be removed in the next major version.++### Notable bugfixes++This release contains a few other notable improvements:++- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.++- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the component that actually triggered the warning. This release adds the first component stack to the warning.++- Further, this release adds a component stack to a number of warnings that previously didn't include one.++- `onMouseEnter` now correctly gets triggered on disabled `<button>` elements.++- ReactDOM was missing a `version` export since we published v16. This release adds it back. We don't recommend using it in your application logic, but it's useful when debugging issues with mismatching / multiple versions of ReactDOM on the same page.++- The value of `dangerouslySetInnerHTML` was unnecessarily coerced to a string on updates by calling its `toString()`. This release removes that behaviour.

This is implementation detail so shouldn't be worth mentioning.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.

Too much jargon IMO:

Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.

Suggestion:

In the future, we will provide an automated script (a "codemod") to migrate away from String Refs. We are enabling this warning first so that you can manually fix the few cases that the codemod can't handle.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.++### Deprecating `React.createFactory`++[`React.createFactory`](https://reactjs.org/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method, and will be removed in a future major version. Replace usages of `React.createFactory` with regular JSX.++### Other warnings++- When dynamically changing `style` on a dom element, it's sometimes possible that the applied style clashes with a previously set style, resulting in a badly styled element. React now detects this pattern and logs a warning. The workaround is to pass the same object 'shape' to `style` everytime. ++- The content of a `<textarea>` element should be passed as `value` or `defaultValue` props. An older pattern was to pass `children` to the `<textarea>` element. This release adds a warning for this usage, and support for this will be removed in the next major version.++### Notable bugfixes++This release contains a few other notable improvements:++- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.++- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the component that actually triggered the warning. This release adds the first component stack to the warning.

They did include the component, but didn't include the stack.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.

Portals are now considered first class supported APIs

They have been since 16.0.

Suggestion:

When React 16 was released, createPortal became an officially supported API. However, we kept unstable_createPortal as a supported alias to keep the few libraries that adopted it working. We are now deprecating the unstable alias. Use createPortal directly instead. It has exactly the same signature.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.++### Deprecating `React.createFactory`++[`React.createFactory`](https://reactjs.org/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method, and will be removed in a future major version. Replace usages of `React.createFactory` with regular JSX.++### Other warnings++- When dynamically changing `style` on a dom element, it's sometimes possible that the applied style clashes with a previously set style, resulting in a badly styled element. React now detects this pattern and logs a warning. The workaround is to pass the same object 'shape' to `style` everytime. ++- The content of a `<textarea>` element should be passed as `value` or `defaultValue` props. An older pattern was to pass `children` to the `<textarea>` element. This release adds a warning for this usage, and support for this will be removed in the next major version.++### Notable bugfixes++This release contains a few other notable improvements:++- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.++- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the component that actually triggered the warning. This release adds the first component stack to the warning.++- Further, this release adds a component stack to a number of warnings that previously didn't include one.

Maybe we want to call out stacks for hydration warnings? People have been asking for them for a long time. I would even include a separate section with a screenshot.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.++### Deprecating `React.createFactory`++[`React.createFactory`](https://reactjs.org/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method, and will be removed in a future major version. Replace usages of `React.createFactory` with regular JSX.

Maybe add:

Alternatively, you can copy and paste this one-line helper or publish it as a library:

let createFactory = type => React.createElement.bind(null, type);
threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.++### Deprecating `React.createFactory`++[`React.createFactory`](https://reactjs.org/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method, and will be removed in a future major version. Replace usages of `React.createFactory` with regular JSX.++### Other warnings++- When dynamically changing `style` on a dom element, it's sometimes possible that the applied style clashes with a previously set style, resulting in a badly styled element. React now detects this pattern and logs a warning. The workaround is to pass the same object 'shape' to `style` everytime. ++- The content of a `<textarea>` element should be passed as `value` or `defaultValue` props. An older pattern was to pass `children` to the `<textarea>` element. This release adds a warning for this usage, and support for this will be removed in the next major version.

This is not a new warning. https://codesandbox.io/s/agitated-johnson-p9z5h

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.

Nit: please remove all domains. Links should start with /, not with http://reactjs.org/. This makes it consistent with the rest of them.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.

Maybe motivate why the warning is useful a little bit? For example:

This warning will help you find application bugs caused by unintentional state changes. In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the setState call into useEffect.

threepointone

comment created time in 2 days

Pull request review commentreactjs/reactjs.org

Blog post for v16.13.0

+---+title: "React v16.13.0"+author: [threepointone]+---++Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.++### Warnings for some updates during render++A React render function is supposed to be a pure function. We do support a local update during a render to [derive state from props](https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.++The fix is usually to move this state change into a `useEffect(...)`.++### Warnings for some deprecated string refs++[String Refs is an old legacy API](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:++```jsx+class ClassWithRenderProp extends React.Component {+  componentDidMount() {+    something(this.refs.foo);+  }+  render() {+    return this.props.children();+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>+    );+  }+}+```++You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) instead:++```jsx+class ClassWithRenderProp extends React.Component {+  foo = React.createRef();+  componentDidMount() {+    something(this.foo.current);+  }+  render() {+    return this.props.children(this.foo);+  }+}++class ClassParent extends React.Component {+  render() {+    return (+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>+    );+  }+}+```++Fixing these edge cases will be a prerequisite to do before being able to apply an automatic codemod.++> To get this warning you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. +> +> If you use the “react” preset you should already have this installed by default!++### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal`++Portals are now considered first class supported APIs, and as such we're removing the `unstable_` prefix for the method that creates portals. Replace all calls to `ReactDOM.unstable_createPortal` with `ReactDOM.createPortal`.++### Deprecating `React.createFactory`++[`React.createFactory`](https://reactjs.org/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method, and will be removed in a future major version. Replace usages of `React.createFactory` with regular JSX.++### Other warnings++- When dynamically changing `style` on a dom element, it's sometimes possible that the applied style clashes with a previously set style, resulting in a badly styled element. React now detects this pattern and logs a warning. The workaround is to pass the same object 'shape' to `style` everytime. 

I don't think we need quotes around shape here. Either we're sure the reader will understand us, or we need to be more specific.

threepointone

comment created time in 2 days

push eventgaearon/react

Dan Abramov

commit sha bc063f170285fe07bc520ad998e01aa3afb7d738

Set current stack for shallow renderer

view details

push time in 2 days

pull request commentfacebook/react

Remove runtime dependency on prop-types

k this should fix it

gaearon

comment created time in 2 days

pull request commentfacebook/react

Remove runtime dependency on prop-types

Yeah, only for shallow renderer. I think it just needs to play along nicely by setting the current stack function.

gaearon

comment created time in 2 days

push eventgaearon/react

Dan Abramov

commit sha 7068c9b92f1ad22ca5d4087736a3240549c7bb41

Remove runtime dep on prop-types

view details

push time in 2 days

PR opened facebook/react

Remove runtime dependency on prop-types

This is to unblock the ESM work. There is no good story for using a CJS dependency so let's just inline this back. I lost the last argument but console.error now "sees" the stack again.

+16 -90

0 comment

15 changed files

pr created time in 2 days

create barnchgaearon/react

branch : no-pt

created branch time in 2 days

pull request commentfacebook/react

Add @nolint to FB bundle headers

This is just for the FB linting. (The directive is not respected by eslint — only by arc lint.)

trueadm

comment created time in 2 days

PR closed facebook/react

Disable classic features in the modern WWW build CLA Signed React Core Team

Builds on https://github.com/facebook/react/pull/18009 + https://github.com/facebook/react/pull/18012

This drops a bunch of features from the WWW modern builds. I set it to pretty aggressive so we can try that and see what we have to revert.

  • No more forked entry point. Same ReactDOM as the rest of the world.
  • No user timings.
  • No EventListener wrapping.
  • No legacy context.
  • No textarea children.
  • No renderSubtree.
  • No unstable_ prefix for createPortal.
  • No maps as children.
  • No findDOMNode, render, hydrate, unmountComponentAtNode.

See individual commits for closer details.

+252 -21

4 comments

18 changed files

gaearon

pr closed time in 2 days

pull request commentfacebook/react

Disable classic features in the modern WWW build

We did this differently.

gaearon

comment created time in 2 days

PR closed facebook/react

`disableLegacyContext` as a dynamic flag for www CLA Signed React Core Team

This PR makes disableLegacyContext a dynamic feature flag for fb/www. For FB internal usage only.

+1 -1

4 comments

1 changed file

threepointone

pr closed time in 2 days

pull request commentfacebook/react

`disableLegacyContext` as a dynamic flag for www

We did this differently.

threepointone

comment created time in 2 days

issue commentfacebook/react

React 16.8.6 upgrade - Warning The component appears to be a function

@torsondev This is not a helpful comment, considering we asked for a reproducing case earlier. :-)

johnernaut

comment created time in 2 days

Pull request review commentfacebook/react

Add @nolint to FB bundle headers

 ${source}`; ${license}  *  * @noflow+ * @notlint

nolint, not notlint?

trueadm

comment created time in 2 days

issue closedfacebook/react

Effect is not run (not even once) when state setter is called in function body

Please help me understand how state setter works when called inside a function body

I have the following code:

image

Running this code will result in infinite re-rendering. According to the React documentation, it says The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component.. I interpret this as the next render will be enqueued and run after the current render finishes, including running the effect. However, the effect is never run at all, not even once, and the chain of re-rendering is happening forever without any bailing out even the code is updating the same state again, i.e. 1

Please help me understand the internal working of this piece of code.

closed time in 2 days

charshin

issue commentfacebook/react

Effect is not run (not even once) when state setter is called in function body

That's because you call setState synchronously in you render, which basically tells that your current render should be discarded, including effects.

This is right.

charshin

comment created time in 2 days

issue closedfacebook/react

eslint-plugin-react-hooks: 'Hook is being called conditionally' error outside condition

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug?

BUG (possibly)

What is the current behavior?

The plugin is showing this error:

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? (react-hooks/rules-of-hooks)eslint

But I don't think I'm calling any hooks conditionally.

The code:

https://codesandbox.io/s/exciting-bhabha-mqj7q

function App(props) {
  const someObject = { propA: true, propB: false };

  for (const propName in someObject) {
    if (propName === true) {
      console.log("something");
    } else {
      console.log("whatever");
    }
  }

  // THE PLUGIN ERROR MSG ON THIS useState
  const [myState, setMyState] = useState(null);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

image

What is the expected behavior?

The plugin wouldn't show the error in this situation.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

image

closed time in 2 days

cbdeveloper

issue commentfacebook/react

eslint-plugin-react-hooks: 'Hook is being called conditionally' error outside condition

Merged https://github.com/facebook/react/pull/16853.

cbdeveloper

comment created time in 2 days

push eventfacebook/react

Moji Izadmehr

commit sha bf13d3e3c6632acad4e7fce1bc93df336cb57acc

[eslint-plugin-react-hooks] Fix cyclic caching for loops containing a… (#16853) * [eslint-plugin-react-hooks] Fix cyclic caching for loops containing a condition * [eslint-plugin-react-hooks] prettier write * [eslint-plugin-react-hooks] Fix set for tests * Update packages/eslint-plugin-react-hooks/src/RulesOfHooks.js Co-Authored-By: Luke Kang <kidkkr@icloud.com> Co-authored-by: Luke Kang <kidkkr@icloud.com>

view details

push time in 2 days

more