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 2328

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

alexkuz/react-json-tree 975

React JSON Viewer Component, Extracted from redux-devtools

bvaughn/react-devtools-experimental 965

Experimental rewrite of the React DevTools extension

gaearon/ama 221

Ask me anything!

cavinsmith/bdsm.js 55

Background Dominant Stripe Manipulator

gaearon/awesome-made-by-russians 27

🇷🇺 The best open source projects that were made and mainly contributed by Russian developers

acdlite/react 23

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

gaearon/awesome-redux 17

Awesome list of Redux examples and middlewares

starteddferber90/playroom-clickable-prototypes

started time in 29 minutes

PR closed facebook/react

changes in read me #414

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.

Before submitting a pull request, please make sure the following is done:

  1. Fork the repository and create your branch from master.
  2. Run yarn in the repository root.
  3. If you've fixed a bug or added code that should be tested, add tests!
  4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
  5. Run yarn test --prod to test in the production environment. It supports the same options as yarn test.
  6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
  7. Format your code with prettier (yarn prettier).
  8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
  9. Run the Flow type checks (yarn flow).
  10. If you haven't already, complete the CLA.

Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html -->

Summary

<!-- Explain the motivation for making this change. What existing problem does the pull request solve? -->

Test Plan

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->

+2 -0

5 comments

1 changed file

ShaileshDeveloper

pr closed time in an hour

pull request commentfacebook/react

changes in read me #414

Please experiment with markdown (e.g. https://dillinger.io/) or pull requests (see https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request for further documentation) on a personal repository. Opening PRs creates notifications for maintainers and everyone watching this repository.

ShaileshDeveloper

comment created time in an hour

push eventreactjs/reactjs.org

Daniel O’Connor

commit sha 4fc709d0576d0f0f1f8ea8b6bb341a12944b5510

Add React 17 release date to versioning policy (#3428)

view details

push time in an hour

pull request commentreactjs/reactjs.org

Add React 17 release date to versioning policy

Thanks!

danoc

comment created time in an hour

PR merged reactjs/reactjs.org

Add React 17 release date to versioning policy CLA Signed

Feel free to change around the wording! The sentence is a bit repetitive IMO.

+1 -1

3 comments

1 changed file

danoc

pr closed time in an hour

issue commentreactjs/reactjs.org

useEffect Clean-Up Function Executes After Component is Removed

If React's new change is necessary then the relevant documentation must be updated to prevent confusion.

The relevant documentation lives in this repository. So opening the issue here is correct.

The change was intended and explicitly mentioned in the changelog.

amir-beheshty

comment created time in an hour

PublicEvent

startedjaredLunde/masonic

started time in 3 hours

Pull request review commentfacebook/react

[Flight] Basic scan of the file system to find Client modules

 module.exports = function(webpackEnv) {           formatter: isEnvProduction ? typescriptFormatter : undefined,         }),       // Fork Start-      new ReactFlightWebpackPlugin({isServer: false}),+      new ReactFlightWebpackPlugin({+        isServer: false,+        clientReferences: {+          directory: './src/',+          recursive: true,+          include: /\.client\.js$/,

Note that I think it’s the resolved file that needs to be .client.js. So you can add an “exports” alias so the import is just plain.

That’s no different than a hybrid wrapper that references a client.

sebmarkbage

comment created time in 6 hours

Pull request review commentfacebook/react

[Flight] Basic scan of the file system to find Client modules

 module.exports = function(webpackEnv) {           formatter: isEnvProduction ? typescriptFormatter : undefined,         }),       // Fork Start-      new ReactFlightWebpackPlugin({isServer: false}),+      new ReactFlightWebpackPlugin({+        isServer: false,+        clientReferences: {+          directory: './src/',+          recursive: true,+          include: /\.client\.js$/,

You will get a static error on the server because you’re trying to import an export from React that doesn’t exist like useState. At least with real ESM. (We might want to fast track ESM for that reason.)

Existing things that just work as hybrids continue to work. Others will error on the server and you have to wrap it in a .client file. Ideally the publisher would’ve already done that but if not, you have to add a local wrapper to fix the error.

sebmarkbage

comment created time in 6 hours

Pull request review commentfacebook/react

[Flight] Basic scan of the file system to find Client modules

  */  import {mkdirSync, writeFileSync} from 'fs';-import {dirname, resolve} from 'path';+import {dirname, resolve, join} from 'path'; import {pathToFileURL} from 'url'; +// This can't be loaded as an ESM module.+const asyncLib = require('neo-async');++const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency');+const NullDependency = require('webpack/lib/dependencies/NullDependency');+const AsyncDependenciesBlock = require('webpack/lib/AsyncDependenciesBlock');+const Template = require('webpack/lib/Template');++class ClientReferenceDependency extends ModuleDependency {+  constructor(request) {+    super(request);+  }++  get type() {+    return 'client-reference';+  }+}++// This is the module that will be used to anchor all client references to.+// I.e. it will have all the client files as async deps from this point on.+// We use the Flight client implementation because you can't get to these+// without the client runtime so it's the first time in the loading sequence+// you might want them.+const clientFileName = require.resolve('../');++type ClientReferenceSearchPath = {+  directory: string,+  recursive?: boolean,+  include: RegExp,+  exclude?: RegExp,+};++type ClientReferencePath = string | ClientReferenceSearchPath;++type Options = {+  isServer: boolean,+  clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,+  chunkName?: string,+};++const PLUGIN_NAME = 'React Transport Plugin';+ export default class ReactFlightWebpackPlugin {-  constructor(options: {isServer: boolean}) {}+  clientReferences: $ReadOnlyArray<ClientReferencePath>;+  chunkName: string;+  constructor(options: Options) {+    if (!options || typeof options.isServer !== 'boolean') {+      throw new Error(+        PLUGIN_NAME + ': You must specify the isServer option as a boolean.',+      );+    }+    if (options.isServer) {+      throw new Error('TODO: Implement the server compiler.');+    }+    if (!options.clientReferences) {+      this.clientReferences = [+        {+          directory: '.',+          recursive: true,+          include: /\.client\.(js|ts|jsx|tsx)$/,+        },+      ];+    } else if (+      typeof options.clientReferences === 'string' ||+      !Array.isArray(options.clientReferences)+    ) {+      this.clientReferences = [(options.clientReferences: $FlowFixMe)];+    } else {+      this.clientReferences = options.clientReferences;+    }+    if (typeof options.chunkName === 'string') {+      this.chunkName = options.chunkName;+      if (!/\[(index|request)\]/.test(this.chunkName)) {+        this.chunkName += '[index]';+      }+    } else {+      this.chunkName = 'client[index]';+    }+  }    apply(compiler: any) {-    compiler.hooks.emit.tap('React Transport Plugin', compilation => {+    const run = (params, callback) => {+      // First we need to find all client files on the file system. We do this early so+      // that we have them synchronously available later when we need them. This might+      // not be needed anymore since we no longer need to compile the module itself in+      // a special way. So it's probably better to do this lazily and in parallel with+      // other compilation.+      const contextResolver = compiler.resolverFactory.get('context', {});+      this.resolveAllClientFiles(+        compiler.context,+        contextResolver,+        compiler.inputFileSystem,+        compiler.createContextModuleFactory(),+        (err, resolvedClientReferences) => {+          if (err) {+            callback(err);+            return;+          }+          compiler.hooks.compilation.tap(

I believe this is a blocking phase so Webpack doesn’t proceed until we’ve invoked the callback.

That’s also why this approach is suboptimal since it doesn’t allow for other parallelism in the meantime.

That was a limitation in the previous approach that needed to change/split the files.

We could put this elsewhere but it’s not broken.

sebmarkbage

comment created time in 6 hours

Pull request review commentfacebook/react

[Flight] Basic scan of the file system to find Client modules

 module.exports = function(webpackEnv) {           formatter: isEnvProduction ? typescriptFormatter : undefined,         }),       // Fork Start-      new ReactFlightWebpackPlugin({isServer: false}),+      new ReactFlightWebpackPlugin({+        isServer: false,+        clientReferences: {+          directory: './src/',+          recursive: true,+          include: /\.client\.js$/,

You’re supposed to include them. That’s why this is such a bad idea and it’s better to compile server first and use the reachable ones as a list here.

sebmarkbage

comment created time in 6 hours

Pull request review commentfacebook/react

[Flight] Basic scan of the file system to find Client modules

  */  import {mkdirSync, writeFileSync} from 'fs';-import {dirname, resolve} from 'path';+import {dirname, resolve, join} from 'path'; import {pathToFileURL} from 'url'; +// This can't be loaded as an ESM module.+const asyncLib = require('neo-async');++const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency');+const NullDependency = require('webpack/lib/dependencies/NullDependency');+const AsyncDependenciesBlock = require('webpack/lib/AsyncDependenciesBlock');+const Template = require('webpack/lib/Template');++class ClientReferenceDependency extends ModuleDependency {+  constructor(request) {+    super(request);+  }++  get type() {+    return 'client-reference';+  }+}++// This is the module that will be used to anchor all client references to.+// I.e. it will have all the client files as async deps from this point on.+// We use the Flight client implementation because you can't get to these+// without the client runtime so it's the first time in the loading sequence+// you might want them.+const clientFileName = require.resolve('../');++type ClientReferenceSearchPath = {+  directory: string,+  recursive?: boolean,+  include: RegExp,+  exclude?: RegExp,+};++type ClientReferencePath = string | ClientReferenceSearchPath;++type Options = {+  isServer: boolean,+  clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,+  chunkName?: string,+};++const PLUGIN_NAME = 'React Transport Plugin';+ export default class ReactFlightWebpackPlugin {-  constructor(options: {isServer: boolean}) {}+  clientReferences: $ReadOnlyArray<ClientReferencePath>;+  chunkName: string;+  constructor(options: Options) {+    if (!options || typeof options.isServer !== 'boolean') {+      throw new Error(+        PLUGIN_NAME + ': You must specify the isServer option as a boolean.',+      );+    }+    if (options.isServer) {+      throw new Error('TODO: Implement the server compiler.');+    }+    if (!options.clientReferences) {+      this.clientReferences = [+        {+          directory: '.',

It’s relative to Webpack’s virtual file system. Nothing touches a real file system.

sebmarkbage

comment created time in 6 hours

Pull request review commentfacebook/react

[Flight] Basic scan of the file system to find Client modules

  */  import {mkdirSync, writeFileSync} from 'fs';-import {dirname, resolve} from 'path';+import {dirname, resolve, join} from 'path'; import {pathToFileURL} from 'url'; +// This can't be loaded as an ESM module.

It’s just a dependency. It has no shared state. I only use it so it has a chance to dedupe and minimize dependencies/differences.

sebmarkbage

comment created time in 6 hours

Pull request review commentfacebook/react

[Flight] Basic scan of the file system to find Client modules

  */  import {mkdirSync, writeFileSync} from 'fs';-import {dirname, resolve} from 'path';+import {dirname, resolve, join} from 'path'; import {pathToFileURL} from 'url'; +// This can't be loaded as an ESM module.

yea

sebmarkbage

comment created time in 6 hours

issue commentfacebook/react

Error: "Cannot read property 'concat' of undefined"

Thanks!

Takes Chrome a couple of days sometimes :( Firefox and Edge are pretty fast

RealDrewKlayman

comment created time in 7 hours

Pull request review commentfacebook/react

[Flight] Basic scan of the file system to find Client modules

  */  import {mkdirSync, writeFileSync} from 'fs';-import {dirname, resolve} from 'path';+import {dirname, resolve, join} from 'path'; import {pathToFileURL} from 'url'; +// This can't be loaded as an ESM module.

I guess this is probably getting inlined. I should treat it as external.

sebmarkbage

comment created time in 7 hours

pull request commentfacebook/react

Fix ESLint crash on empty react effect hook

<!-- 0 failure: 0 warning:

2 markdown notices DangerID: danger-id-experimental; -->

<details> <summary>Details of bundled changes.</summary>

<p>Comparing: 0db61a08befe6406aa93568708224d1cca2aff7d...204bbd433b822e106c85c707fcf23258166f7011</p>

eslint-plugin-react-hooks

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
eslint-plugin-react-hooks.development.js +0.6% +0.5% 84.66 KB 85.14 KB 20.17 KB 20.27 KB NODE_DEV
eslint-plugin-react-hooks.production.min.js :small_red_triangle:+0.6% :small_red_triangle:+0.5% 24.75 KB 24.9 KB 8.51 KB 8.55 KB NODE_PROD

</details>

Size changes (experimental)

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 204bbd433b822e106c85c707fcf23258166f7011 </p>

ChrisRu

comment created time in 9 hours

pull request commentfacebook/react

Fix ESLint crash on empty react effect hook

<!-- 0 failure: 0 warning:

2 markdown notices DangerID: danger-id-stable; -->

<details> <summary>Details of bundled changes.</summary>

<p>Comparing: 0db61a08befe6406aa93568708224d1cca2aff7d...204bbd433b822e106c85c707fcf23258166f7011</p>

eslint-plugin-react-hooks

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
eslint-plugin-react-hooks.development.js +0.6% +0.5% 84.65 KB 85.13 KB 20.17 KB 20.26 KB NODE_DEV
eslint-plugin-react-hooks.production.min.js :small_red_triangle:+0.6% :small_red_triangle:+0.5% 24.74 KB 24.89 KB 8.5 KB 8.54 KB NODE_PROD

</details>

Size changes (stable)

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 204bbd433b822e106c85c707fcf23258166f7011 </p>

ChrisRu

comment created time in 9 hours

pull request commentfacebook/react

Fix ESLint crash on empty react effect hook

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3fab8c1f98f619eb5e5b5f46e2519e59ae654dc5:

Sandbox Source
React Configuration
pedantic-cannon-hns9u Issue #20343
ChrisRu

comment created time in 9 hours

PR opened facebook/react

Fix ESLint crash on empty react effect hook

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.

Before submitting a pull request, please make sure the following is done:

  1. Fork the repository and create your branch from master.
  2. Run yarn in the repository root.
  3. If you've fixed a bug or added code that should be tested, add tests!
  4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
  5. Run yarn test --prod to test in the production environment. It supports the same options as yarn test.
  6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
  7. Format your code with prettier (yarn prettier).
  8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
  9. Run the Flow type checks (yarn flow).
  10. If you haven't already, complete the CLA.

Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html -->

Summary

<!-- Explain the motivation for making this change. What existing problem does the pull request solve? -->

ESLint crashes due to the eslint-plugin-react-hooks plugin, when an empty (no arguments) useEffect, useLayoutEffect, useMemo or useCallback is written.

If any of these hooks are empty during runtime, React will also throw a TypeError, so this should also be a lint warning in my opinion.

To resolve this crash, a check is added to see if there is any callback supplied and creates a lint warning if there isn't one.

Resolves #20343

Test Plan

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->

I built the eslint-plugin-react-hooks bundle and copied it into the node_modules of my test project, which fixed the crashes.

I also verified this new lint check didn't impact custom hooks and it didn't.

I added a test case for these empty hooks to check if the correct problem is shown by ESLint. I also ran the tests for the whole repository to ensure there were no other problems.

+49 -0

0 comment

2 changed files

pr created time in 9 hours

startedgaearon/overreacted.io

started time in 9 hours

fork winkler1/snowpack

WASM-powered frontend build tool. Fast, lightweight, unbundled ESM. ✌️

https://www.snowpack.dev

fork in 9 hours

PR closed reactjs/reactjs.org

Update reference-react-component.md CLA Signed

Modified "inserted into the tree" sentence in componentDidMount() to "inserted into the DOM tree"

<!--

Thank you for the PR! Contributors like you keep React awesome!

Please see the Contribution Guide for guidelines:

https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md

If your PR references an existing issue, please add the issue number below

-->

+1 -1

3 comments

1 changed file

kalaivanan-muthusamy

pr closed time in 9 hours

pull request commentfacebook/react

changes in read me #414

<!-- 0 failure: 0 warning:

2 markdown notices DangerID: danger-id-stable; -->

No significant bundle size changes to report.

Size changes (stable)

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against e1b337f9cbb1edba5434a3054b2dc21750954b71 </p>

ShaileshDeveloper

comment created time in 10 hours

pull request commentfacebook/react

changes in read me #414

<!-- 0 failure: 0 warning:

2 markdown notices DangerID: danger-id-experimental; -->

No significant bundle size changes to report.

Size changes (experimental)

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against e1b337f9cbb1edba5434a3054b2dc21750954b71 </p>

ShaileshDeveloper

comment created time in 10 hours

pull request commentfacebook/react

changes in read me #414

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e1b337f9cbb1edba5434a3054b2dc21750954b71:

Sandbox Source
React Configuration
ShaileshDeveloper

comment created time in 10 hours

pull request commentfacebook/react

changes in read me #414

Hi @ShaileshDeveloper!

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

ShaileshDeveloper

comment created time in 10 hours

PR opened facebook/react

changes in read me #414

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.

Before submitting a pull request, please make sure the following is done:

  1. Fork the repository and create your branch from master.
  2. Run yarn in the repository root.
  3. If you've fixed a bug or added code that should be tested, add tests!
  4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
  5. Run yarn test --prod to test in the production environment. It supports the same options as yarn test.
  6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
  7. Format your code with prettier (yarn prettier).
  8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
  9. Run the Flow type checks (yarn flow).
  10. If you haven't already, complete the CLA.

Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html -->

Summary

<!-- Explain the motivation for making this change. What existing problem does the pull request solve? -->

Test Plan

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->

+2 -0

0 comment

1 changed file

pr created time in 10 hours

more