mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Jan Kassens
2b1fb91a55
Hermes parser is the preferred parser for Flow code going forward. We need to upgrade to this parser to support new Flow syntax like function `this` context type annotations or `ObjectType['prop']` syntax. Unfortunately, there's quite a few upgrades here to make it work somehow (dependencies between the changes) - ~Upgrade `eslint` to `8.*`~ reverted this as the React eslint plugin tests depend on the older version and there's a [yarn bug](https://github.com/yarnpkg/yarn/issues/6285) that prevents `devDependencies` and `peerDependencies` to different versions. - Remove `eslint-config-fbjs` preset dependency and inline the rules, imho this makes it a lot clearer what the rules are. - Remove the turned off `jsx-a11y/*` rules and it's dependency instead of inlining those from the `fbjs` config. - Update parser and dependency from `babel-eslint` to `hermes-eslint`. - `ft-flow/no-unused-expressions` rule replaces `no-unused-expressions` which now allows standalone type asserts, e.g. `(foo: number);` - Bunch of globals added to the eslint config - Disabled `no-redeclare`, seems like the eslint upgrade started making this more precise and warn against re-defined globals like `__EXPERIMENTAL__` (in rollup scripts) or `fetch` (when importing fetch from node-fetch). - Minor lint fixes like duplicate keys in objects.
41 lines
905 B
JavaScript
41 lines
905 B
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {useLayoutEffect, useRef, useState} from 'react';
|
|
import {render} from 'react-dom';
|
|
|
|
function createContainer() {
|
|
const container = document.createElement('div');
|
|
|
|
((document.body: any): HTMLBodyElement).appendChild(container);
|
|
|
|
return container;
|
|
}
|
|
|
|
function EffectWithState() {
|
|
const [didMount, setDidMount] = useState(0);
|
|
|
|
const renderCountRef = useRef(0);
|
|
renderCountRef.current++;
|
|
|
|
useLayoutEffect(() => {
|
|
if (!didMount) {
|
|
setDidMount(true);
|
|
}
|
|
}, [didMount]);
|
|
|
|
return (
|
|
<ul>
|
|
<li>Rendered {renderCountRef.current} times</li>
|
|
{didMount && <li>Mounted!</li>}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
render(<EffectWithState />, createContainer());
|