profile
viewpoint
Sophie Alpert sophiebits Humu California https://sophiebits.com/ I like fixing things. eng at humu! former eng manager of @reactjs at Facebook. ex-@khanacademy. 💎🌸 she/her. kindness, intersectional feminism, music.

facebook/react 154036

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

jonschlinkert/remarkable 4833

Markdown parser, done right. Commonmark support, extensions, syntax plugins, high speed - all in one. Gulp and metalsmith plugins available. Used by Facebook, Docusaurus and many others! Use https://github.com/breakdance/breakdance for HTML-to-markdown conversion. Use https://github.com/jonschlinkert/markdown-toc to generate a table of contents.

reactjs/rfcs 2834

RFCs for changes to React

sindresorhus/object-assign 865

ES2015 Object.assign() ponyfill

kentcdodds/modern-react 208

workshop about React's hottest new features in 16.7.0

sophiebits/adventofcode 17

Advent of Code Solutions

bvaughn/react 13

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

HCSSiM/yp17 5

HCSSiM style for LaTeX

kamens/khan-exercises 4

A framework for building exercises to work with Khan Academy.

push eventsophiebits/react-dom-mini

dependabot[bot]

commit sha d70eb8e98aeec0f217834cdc6c29e55134512046

Bump elliptic from 6.5.1 to 6.5.3 Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.1 to 6.5.3. - [Release notes](https://github.com/indutny/elliptic/releases) - [Commits](https://github.com/indutny/elliptic/compare/v6.5.1...v6.5.3) Signed-off-by: dependabot[bot] <support@github.com>

view details

Sophie Alpert

commit sha e863db543b33187faefb9d53d05b4bf5409a3ca6

Merge pull request #4 from sophiebits/dependabot/npm_and_yarn/elliptic-6.5.3 Bump elliptic from 6.5.1 to 6.5.3

view details

push time in 11 days

PR merged sophiebits/react-dom-mini

Bump elliptic from 6.5.1 to 6.5.3 dependencies

Bumps elliptic from 6.5.1 to 6.5.3. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/indutny/elliptic/commit/8647803dc3d90506aa03021737f7b061ba959ae1"><code>8647803</code></a> 6.5.3</li> <li><a href="https://github.com/indutny/elliptic/commit/856fe4d99fe7b6200556e6400b3bf585b1721bec"><code>856fe4d</code></a> signature: prevent malleability and overflows</li> <li><a href="https://github.com/indutny/elliptic/commit/60489415e545efdfd3010ae74b9726facbf08ca8"><code>6048941</code></a> 6.5.2</li> <li><a href="https://github.com/indutny/elliptic/commit/9984964457c9f8a63b91b01ea103260417eca237"><code>9984964</code></a> package: bump dependencies</li> <li><a href="https://github.com/indutny/elliptic/commit/ec735edde187a43693197f6fa3667ceade751a3a"><code>ec735ed</code></a> utils: leak less information in <code>getNAF()</code></li> <li>See full diff in <a href="https://github.com/indutny/elliptic/compare/v6.5.1...v6.5.3">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+6 -6

0 comment

1 changed file

dependabot[bot]

pr closed time in 11 days

push eventsophiebits/cra-typescript-line-numbers-bug

dependabot[bot]

commit sha edeac5cee9e9b84efe0ef8e30ef21db4a6f2e505

Bump elliptic from 6.5.2 to 6.5.3 Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.2 to 6.5.3. - [Release notes](https://github.com/indutny/elliptic/releases) - [Commits](https://github.com/indutny/elliptic/compare/v6.5.2...v6.5.3) Signed-off-by: dependabot[bot] <support@github.com>

view details

Sophie Alpert

commit sha 896dc2649353ad06814a1760651d83c747aa245d

Merge pull request #2 from sophiebits/dependabot/npm_and_yarn/elliptic-6.5.3 Bump elliptic from 6.5.2 to 6.5.3

view details

push time in 11 days

PR merged sophiebits/cra-typescript-line-numbers-bug

Bump elliptic from 6.5.2 to 6.5.3 dependencies

Bumps elliptic from 6.5.2 to 6.5.3. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/indutny/elliptic/commit/8647803dc3d90506aa03021737f7b061ba959ae1"><code>8647803</code></a> 6.5.3</li> <li><a href="https://github.com/indutny/elliptic/commit/856fe4d99fe7b6200556e6400b3bf585b1721bec"><code>856fe4d</code></a> signature: prevent malleability and overflows</li> <li>See full diff in <a href="https://github.com/indutny/elliptic/compare/v6.5.2...v6.5.3">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+6 -6

0 comment

1 changed file

dependabot[bot]

pr closed time in 11 days

push eventsophiebits/refresh-cycle-repro

dependabot[bot]

commit sha 2e0bd7f5154839cca21c7da02e7571faccf1bcd9

Bump elliptic from 6.5.2 to 6.5.3 Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.2 to 6.5.3. - [Release notes](https://github.com/indutny/elliptic/releases) - [Commits](https://github.com/indutny/elliptic/compare/v6.5.2...v6.5.3) Signed-off-by: dependabot[bot] <support@github.com>

view details

Sophie Alpert

commit sha b20e105078275e746bebe7415438bd1ea8d4bb8e

Merge pull request #3 from sophiebits/dependabot/npm_and_yarn/elliptic-6.5.3 Bump elliptic from 6.5.2 to 6.5.3

view details

push time in 11 days

PR merged sophiebits/refresh-cycle-repro

Bump elliptic from 6.5.2 to 6.5.3 dependencies

Bumps elliptic from 6.5.2 to 6.5.3. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/indutny/elliptic/commit/8647803dc3d90506aa03021737f7b061ba959ae1"><code>8647803</code></a> 6.5.3</li> <li><a href="https://github.com/indutny/elliptic/commit/856fe4d99fe7b6200556e6400b3bf585b1721bec"><code>856fe4d</code></a> signature: prevent malleability and overflows</li> <li>See full diff in <a href="https://github.com/indutny/elliptic/compare/v6.5.2...v6.5.3">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+6 -6

0 comment

1 changed file

dependabot[bot]

pr closed time in 11 days

issue commentfacebook/create-react-app

Line numbers reported in TypeScript syntax errors can be incorrect

Still hasn't been a release, so still relevant.

sophiebits

comment created time in 17 days

PR opened selfdefined/web-app

Fix typo in index.njk
+1 -1

0 comment

1 changed file

pr created time in 22 days

push eventsophiebits/selfdefined

Sophie Alpert

commit sha 8f2c73fb602d8139ed31784da81d0ff5a7f03149

Fix typo in index.njk

view details

push time in 22 days

PR merged sophiebits/refresh-cycle-repro

Bump lodash from 4.17.15 to 4.17.19 dependencies

Bumps lodash from 4.17.15 to 4.17.19. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/lodash/lodash/releases">lodash's releases</a>.</em></p> <blockquote> <h2>4.17.16</h2> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/lodash/lodash/commit/d7fbc52ee0466a6d248f047b5d5c3e6d1e099056"><code>d7fbc52</code></a> Bump to v4.17.19</li> <li><a href="https://github.com/lodash/lodash/commit/2e1c0f22f425e9c013815b2cd7c2ebd51f49a8d6"><code>2e1c0f2</code></a> Add npm-package</li> <li><a href="https://github.com/lodash/lodash/commit/1b6c282299f4e0271f932b466c67f0f822aa308e"><code>1b6c282</code></a> Bump to v4.17.18</li> <li><a href="https://github.com/lodash/lodash/commit/a370ac81408de2da77a82b3c4b61a01a3b9c2fac"><code>a370ac8</code></a> Bump to v4.17.17</li> <li><a href="https://github.com/lodash/lodash/commit/1144918f3578a84fcc4986da9b806e63a6175cbb"><code>1144918</code></a> Rebuild lodash and docs</li> <li><a href="https://github.com/lodash/lodash/commit/3a3b0fd339c2109563f7e8167dc95265ed82ef3e"><code>3a3b0fd</code></a> Bump to v4.17.16</li> <li><a href="https://github.com/lodash/lodash/commit/c84fe82760fb2d3e03a63379b297a1cc1a2fce12"><code>c84fe82</code></a> fix(zipObjectDeep): prototype pollution (<a href="https://github-redirect.dependabot.com/lodash/lodash/issues/4759">#4759</a>)</li> <li><a href="https://github.com/lodash/lodash/commit/e7b28ea6cb17b4ca021e7c9d66218c8c89782f32"><code>e7b28ea</code></a> Sanitize sourceURL so it cannot affect evaled code (<a href="https://github-redirect.dependabot.com/lodash/lodash/issues/4518">#4518</a>)</li> <li><a href="https://github.com/lodash/lodash/commit/0cec225778d4ac26c2bac95031ecc92a94f08bbb"><code>0cec225</code></a> Fix lodash.isEqual for circular references (<a href="https://github-redirect.dependabot.com/lodash/lodash/issues/4320">#4320</a>) (<a href="https://github-redirect.dependabot.com/lodash/lodash/issues/4515">#4515</a>)</li> <li><a href="https://github.com/lodash/lodash/commit/94c3a8133cb4fcdb50db72b4fd14dd884b195cd5"><code>94c3a81</code></a> Document matches* shorthands for over* methods (<a href="https://github-redirect.dependabot.com/lodash/lodash/issues/4510">#4510</a>) (<a href="https://github-redirect.dependabot.com/lodash/lodash/issues/4514">#4514</a>)</li> <li>Additional commits viewable in <a href="https://github.com/lodash/lodash/compare/4.17.15...4.17.19">compare view</a></li> </ul> </details> <details> <summary>Maintainer changes</summary> <p>This version was pushed to npm by <a href="https://www.npmjs.com/~mathias">mathias</a>, a new releaser for lodash since your current version.</p> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+16 -214

1 comment

1 changed file

dependabot[bot]

pr closed time in 24 days

push eventsophiebits/refresh-cycle-repro

dependabot[bot]

commit sha 5a6518db51cd7aa5340cfa9e4bac8673ebab2620

Bump lodash from 4.17.15 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.19) Signed-off-by: dependabot[bot] <support@github.com>

view details

Sophie Alpert

commit sha 5215d7a6843297743438c24b2ffa87a489ec37dd

Merge pull request #2 from sophiebits/dependabot/npm_and_yarn/lodash-4.17.19 Bump lodash from 4.17.15 to 4.17.19

view details

push time in 24 days

pull request commentsophiebits/refresh-cycle-repro

Bump lodash from 4.17.15 to 4.17.19

meh

dependabot[bot]

comment created time in 24 days

issue closedfacebook/react

Feature request: renderTypes

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

Per some discussion today with @tomocchino and @thejameskyle, I'd like a non-Flow mechanism to annotate what type(s) of elements a component expects to render.

Here's some examples, with Flow types for comparison (that I realize may not be currently checked in Flow, yet):

function Foo({ yes }){
  return yes ? <Bar /> : <div />;
}
Foo.renderTypes = [Bar, 'div'];


class Bar extends React.Component {
  static renderTypes = [Button];

  render() {
    return <Button />;
  }
}
function Foo({ yes }): React.Element<Bar | 'div'> {
  return yes ? <Bar /> : <div />;
}

class Bar extends React.Component {
  render(): React.Element<Button> {
    return <Button />;
  }
}

Inside @Airbnb, we have lots of use cases where we have container components in a separate package - say, a <ButtonRow>, and we have intentionally restrictive propTypes on its children prop, to only allow a Button (also in the same package). However, in an app that consumes this component library package, a dev may want to create a <SpecialProductButton /> that in turn renders a <Button> - however, they're unable to pass it into ButtonRow (our propType warnings fail tests), even though conceptually it should be permitted.

Having .renderTypes would allow us to widen our children propType to allow for either a <Button>, or anything that renders a <Button>, which helps us maintain separation of concerns (the package doesn't have to know about <SpecialProductButton> to accept it) as well as maintain strictness (the package doesn't have to allow any wacky element inside <ButtonRow>).

I imagine the implementation to be:

  1. when render() is called or an SFC is invoked, (in async rendering, it'd be when the component resolves, i suppose)
  2. in development only and if .renderTypes exists on the component
  3. evaluate the equivalent of elementType(...Component.renderTypes)({ children: renderedValue }, 'children', ...),
  4. just like propTypes, log the error if one is returned

(cc @spicyj)

closed time in a month

ljharb

issue commentfacebook/react

Feature request: renderTypes

I’m going to close this.

It seems that the web dev industry has settled on TypeScript for people who want type checking in their code. Static type checks (as I’m sure you know) have the advantage that they detect problems at build time even if the faulty code isn’t exercised during development.

At this point I see it as much more likely that in the future React removes propTypes support rather than adding renderTypes. You can also write a custom linter if this is a concern specifically for your employer. It’s not a common enough request that it makes sense to add to React now.

ljharb

comment created time in a month

Pull request review commentfacebook/react

Add missing unitless CSS properties

  * CSS properties which accept numbers but are not in units of "px".  */ export const isUnitlessNumber = {+  animation: true,

Since animation: 1px is meaningless/invalid, I don’t think adding animation can break anything, at least (except if perhaps someone has a unitless number that gets px and thus ignored today).

kripod

comment created time in a month

issue commentfacebook/react

Inconsistent design: forceUpdate() not updating PureComponent

This should work correctly already. Can you provide a codesandbox demonstrating the problem, as the issue template asks for?

virtumonde

comment created time in a month

issue commentfacebook/react

Strange onScroll behaviour

Correct. This is “working as intended”, similar to onSubmit (but I wouldn’t make the same decision if I was designing React DOM today).

As a workaround, you can check e.target === e.currentTarget if you want to know if the event originated from the element that the listener is attached to.

O4epegb

comment created time in a month

PR closed reactjs/reactjs.org

Update to parentheses CLA Signed

Removed parentheses

<!--

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

sufferingAnt638

pr closed time in a month

pull request commentreactjs/reactjs.org

Update to parentheses

It's correct as written.

sufferingAnt638

comment created time in a month

Pull request review commentfacebook/react

Hydration of previously rendered server markup

 describe('rendering React components at document', () => {     }      var markup = ReactDOMServer.renderToString(<Component />);-    testDocument = getTestDocument(markup);+    var testDocument = getTestDocument(markup);      ReactDOM.render(<Component />, testDocument);      expect(testDocument.body.innerHTML).toBe('Hello world');      // Reactive update-    expect(function() {+    if (ReactDOMFeatureFlags.useFiber) {+      // This works but is probably a bad idea.

See UNMOUNT_INVARIANT_MESSAGE at the top of the file. Browsers don't like when you unmount the html host node, or at least some didn't when we added that invariant to Stack.

sebmarkbage

comment created time in a month

Pull request review commentfacebook/react

Fix development mode hang when iframe is removed

 if (__DEV__) {         ) {           window.event = windowEvent;

I wonder why this doesn't do

if (windowEventDescriptor) {
    Object.defineProperty(window, 'event', windowEventDescriptor);
}

as below.

gaearon

comment created time in a month

pull request commentfacebook/react

Add failing test for #18497

@gaearon Worth committing a regression test?

sophiebits

comment created time in a month

push eventsophiebits/react

Sophie Alpert

commit sha 23ae5d43aa83dcbfb38e0a8d1b87bf279baec0c0

Add regression test for #18497

view details

push time in a month

push eventsophiebits/react

jddxf

commit sha 241103a6fb8544077579c4c1458f367510d92934

Fix bailout broken in lazy components due to default props resolving (#18539) * Add failing tests for lazy components * Fix bailout broken in lazy components due to default props resolving We should never compare unresolved props with resolved props. Since comparing resolved props by reference doesn't make sense, we use unresolved props in that case. Otherwise, resolved props are used. * Avoid reassigning props warning when we bailout

view details

Dan Abramov

commit sha b225d4f2614844a939482ef33baa84aa76bcf402

Revert "Revert "Refactor commitPlacement to recursively insert nodes (#17996)" (#18517)" (#18540) This reverts commit e69ca310ea56b6f2f510dd463902405285953432.

view details

Sebastian Markbåge

commit sha 5474a83e258b497584bed9df95de1d554bc53f89

Disable console.logs in the second render pass of DEV mode double render (#18547) * Disable console log during the second rerender * Use the disabled log to avoid double yielding values in scheduler mock * Reenable debugRenderPhaseSideEffectsForStrictMode in tests that can

view details

Sebastian Markbåge

commit sha b014e2d5e377a94bbf8d94d9a2602ce05c184e38

Don't use closures in DevTools injection (#18278) * Don't use closures in DevTools injection Nested closures are tricky. They're not super efficient and when they share scope between multiple closures they're hard for a compiler to optimize. It's also unclear how many versions will be created. By hoisting things out an just make it simple calls the compiler can do a much better job. * Store injected hook to work around fast refresh

view details

Sebastian Markbåge

commit sha 147bdef11bbeb8f4aef18c56d53ec1591fce8653

Port more tests to the Scheduler.unstable_yieldValue pattern and drop internal.js (#18549) * Drop the .internal.js suffix on some files that don't need it anymore * Port some ops patterns to scheduler yield * Fix triangle test to avoid side-effects in constructor * Move replaying of setState updaters until after the effect Otherwise any warnings get silenced if they're deduped. * Drop .internal.js in more files * Don't check propTypes on a simple memo component unless it's lazy Comparing the elementType doesn't work for this because it will never be the same for a simple element. This caused us to double validate these. This was covered up because in internal tests this was deduped since they shared the prop types cache but since we now inline it, it doesn't get deduped.

view details

Andrew Clark

commit sha d686f3f16a796025ce32cfb431b70eef6de1934e

Add `.old` prefix to reconciler modules

view details

Andrew Clark

commit sha 376d5c1b5aa17724c5fea9412f8fcde14a7b23f1

Split cross-package types from implementation Some of our internal reconciler types have leaked into other packages. Usually, these types are treated as opaque; we don't read and write to its fields. This is good. However, the type is often passed back to a reconciler method. For example, React DOM creates a FiberRoot with `createContainer`, then passes that root to `updateContainer`. It doesn't do anything with the root except pass it through, but because `updateContainer` expects a full FiberRoot, React DOM is still coupled to all its fields. I don't know if there's an idiomatic way to handle this in Flow. Opaque types are simlar, but those only work within a single file. AFAIK, there's no way to use a package as the boundary for opaqueness. The immediate problem this presents is that the reconciler refactor will involve changes to our internal data structures. I don't want to have to fork every single package that happens to pass through a Fiber or FiberRoot, or access any one of its fields. So my current plan is to share the same Flow type across both forks. The shared type will be a superset of each implementation's type, e.g. Fiber will have both an `expirationTime` field and a `lanes` field. The implementations will diverge, but not the types. To do this, I lifted the type definitions into a separate module.

view details

Andrew Clark

commit sha 17f582e0453b808860be59ed3437c6a426ae52de

Add forked copies of reconciler modules All changes in this commit were generated by the following commands. Copy each module that ends with `.old` to a new file that ends with `.new`: ```sh for f in packages/react-reconciler/src/*.old.js; do cp "$f" "$(echo "$f" | sed s/\.old/\.new/)"; done ``` Then transform the internal imports: ```sh grep -rl --include="*.new.js" '.old' packages/react-reconciler/src/| xargs sed -i '' "s/\.old\'/\.new\'/g" ```

view details

Andrew Clark

commit sha 4c6470cb3b821f3664955290cd4c4c7ac0de733a

Point ReactDOMForked to the new implementation Updates Rollup, Jest, and Flow configuration to point to the new entry points.

view details

Dan Abramov

commit sha c74f0b06467ca38cf8ab7bc77e896fc5f120612c

Update stale.yml

view details

Dominic Gannaway

commit sha 8cbce05be11f2375ca27bcd77b58253d29c84cad

Move plugins into their own directory (#18553)

view details

Dominic Gannaway

commit sha ca1a703d216cc70e40ebb45533b44773ae7a32d8

Make enableLegacyFBSupport flag dynamic for www (#18551)

view details

Dominic Gannaway

commit sha 0566b706eefc41b1e5f479e0f745c229b8958ca2

Fix fiber memory leak with runAllPassiveEffectDestroysBeforeCreates (#18554)

view details

Dominic Gannaway

commit sha d48dbb824985166ecb7b2959db03090a8593dce0

Clear more Fiber fields in detachFiber (#18556)

view details

Sebastian Markbåge

commit sha 11ac10b44e9371b258bbf13faffd0dde5a7c0d0e

Port error boundaries test to yieldValue (#18558)

view details

Andrew Clark

commit sha 26fc16484e0586b65c7f549934354ef08f8d403e

Script for syncing changes between forks (#18550) Adds command `yarn merge-fork`. ```sh yarn merge-fork --base-dir=packages/react-reconciler/src ReactFiberWorkLoop ``` This will take all the changes in `ReactFiberWorkLoop.new.js` and apply them to `ReactFiberWorkLoop.old.js`. You can merge multiple modules at a time: ```sh yarn merge-fork \ --base-dir=packages/react-reconciler/src \ ReactFiberWorkLoop \ ReactFiberBeginWork \ ReactFiberCompleteWork \ ReactFiberCommitWork ``` You can provide explicit "old" and "new" file names. This only works for one module at a time: ```sh yarn merge-fork \ --base-dir=packages/react-reconciler/src \ --old=ReactFiberExpirationTime.js \ --new=ReactFiberLane.js ``` The default is to merge changes from the new module to the old one. To merge changes in the opposite direction, use `--reverse`. ```sh yarn merge-fork \ --reverse \ --base-dir=packages/react-reconciler/src \ ReactFiberWorkLoop ``` By default, the changes are compared to HEAD. You can use `--base-ref` to compare to any rev. For example, while working on a PR, you might make multiple commits to the new fork before you're ready to backport them to the old one. In that case, you want to compare to the merge base of your PR branch: ```sh yarn merge-fork \ --base-ref=$(git merge-base HEAD origin/master) --base-dir=packages/react-reconciler/src \ ReactFiberWorkLoop ```

view details

Sebastian Markbåge

commit sha cbab25bb5159e82f0d74b0d2ad84d7ad7dd3613a

Exclude forwardRef and memo from stack frames (#18559) We can't patch the row. We could give these their own "built-in" stack frame since they're conceptually HoCs. However, from a debugging perspective this is not very useful meta data and quite noisy. So I'm just going to exclude them.

view details

Dan Abramov

commit sha e5d06e34b6ef28fc4e7e92c054ab625898f7159f

Revert "Clear more Fiber fields in detachFiber (#18556)" (#18562) This reverts commit d48dbb824985166ecb7b2959db03090a8593dce0.

view details

Andrew Clark

commit sha dc630d3374e8b3d01cdf9e12a81eab9322ac6832

Fork ReactFiberExpirationTime I had thought I wouldn't fork this one because the new "lanes" module will be pretty different, but I need it to make some incremental changes.

view details

Andrew Clark

commit sha b04c7fa28cadaa76fd8390963fe2b8d2a7962c50

Decouple expiration times and transition timeouts (#17920) We currently use the expiration time to represent the timeout of a transition. Since we intend to stop treating work priority as a timeline, we can no longer use this trick. In this commit, I've changed it to store the event time on the update object instead. Long term, we will store event time on the root as a map of transition -> event time. I'm only storing it on the update object as a temporary workaround to unblock the rest of the changes.

view details

push time in a month

pull request commentfacebook/react

Updated grammar typos in README markdown content

These are correct as written.

sasidharank

comment created time in 2 months

PR closed facebook/react

Updated grammar typos in README markdown content CLA Signed

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

+4 -4

3 comments

1 changed file

sasidharank

pr closed time in 2 months

push eventreactjs/reactjs.org

Moni

commit sha e548bd7e65086a8206fee46bd9e24b18b68bf045

Update 2013-10-16-react-v0.5.0.md (#2945)

view details

push time in 2 months

PR merged reactjs/reactjs.org

docs: fix whitespace CLA Signed

Just removing a very small whitespace, I hope it helps.

+1 -1

3 comments

1 changed file

NotMoni

pr closed time in 2 months

Pull request review commentfacebook/react

Land Lanes implementation in old fork

 export function attach(     const dependencies =       (fiber: any).dependencies ||       (fiber: any).dependencies_old ||-      (fiber: any).dependencies_new;+      (fiber: any).dependencies;

this statement doesn't look quite right

acdlite

comment created time in 2 months

pull request commentreactjs/reactjs.org

Clarify language in components-and-props.md

Thanks!

rickhanlonii

comment created time in 2 months

push eventreactjs/reactjs.org

Ricky

commit sha 6bb0d33e0c22a5c0676eb68f296a4ed60a910c9b

Clarify language in components-and-props.md (#3020) * Clarify language in components-and-props.md This is a nit for a few reasons: - The point that extracting a component that "is complex enough on its own" means that it's not necessarily reusable. - Extracting the components listed in the same sentence (e.g. App) are not necessarily reusable. - This ends the section "Extracting Components" with a reference to extraction instead of re-usability. - This delimits extracting into a separate component from creating a re-usable component. * Update components-and-props.md * Update components-and-props.md

view details

push time in 2 months

PR merged reactjs/reactjs.org

Clarify language in components-and-props.md CLA Signed

This is a nit for a few reasons:

  • The point that extracting a component that "is complex enough on its own" means that it's not necessarily reusable.
  • Extracting the components listed in the same sentence (e.g. App) are not necessarily reusable.
  • This ends the section "Extracting Components" with a reference to extraction instead of re-usability.
  • This delimits extracting into a separate component from creating a re-usable component.

<!--

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

0 comment

1 changed file

rickhanlonii

pr closed time in 2 months

issue commentfacebook/react

Bug: eslint exhaustive-deps doesn't recognize JSXIdentifier as used

@yanneves Not quite. See the second code example in https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations for more detail on the pattern I'm using.

sophiebits

comment created time in 2 months

Pull request review commentfacebook/react

Changelog for the next release

+## ???++### React++* Add `react/jsx-runtime` and `react/jsx-dev-runtime` entry points for the [new JSX transform](https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154-https-githubcom-babel-babel-pull-11154). ([@lunaruan](https://github.com/lunaruan) in [#18299](https://github.com/facebook/react/pull/18299))+* Allow to specify `displayName` on context for improved stacks. ([@eps1lon](https://github.com/eps1lon) in [#18224](https://github.com/facebook/react/pull/18224))++### React DOM++* Stop exposing internals that won’t be needed by React Native Web. ([@necolas](https://github.com/necolas) in [#18483](https://github.com/facebook/react/pull/18483))+* Deprecate the undocumented and misleading `ReactTestUtils.SimulateNative` API. ([@gaearon](https://github.com/gaearon) in [#13407](https://github.com/facebook/react/pull/13407))+* Rename private field names used in the internals. ([@gaearon](https://github.com/gaearon) in [#18377](https://github.com/facebook/react/pull/18377))+* Don't call User Timing API in development. ([@gaearon](https://github.com/gaearon) in [#18417](https://github.com/facebook/react/pull/18417))+* Disable console during the repeated render in Strict Mode. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18547](https://github.com/facebook/react/pull/18547))+* In Strict Mode, double-render components without Hooks too. ([@eps1lon](https://github.com/eps1lon) in [#18430](https://github.com/facebook/react/pull/18430))

for both of these: in dev?

gaearon

comment created time in 3 months

Pull request review commentfacebook/react

Changelog for the next release

+## ???++### React++* Add `react/jsx-runtime` and `react/jsx-dev-runtime` entry points for the [new JSX transform](https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154-https-githubcom-babel-babel-pull-11154). ([@lunaruan](https://github.com/lunaruan) in [#18299](https://github.com/facebook/react/pull/18299))+* Allow to specify `displayName` on context for improved stacks. ([@eps1lon](https://github.com/eps1lon) in [#18224](https://github.com/facebook/react/pull/18224))++### React DOM++* Stop exposing internals that won’t be needed by React Native Web. ([@necolas](https://github.com/necolas) in [#18483](https://github.com/facebook/react/pull/18483))+* Deprecate the undocumented and misleading `ReactTestUtils.SimulateNative` API. ([@gaearon](https://github.com/gaearon) in [#13407](https://github.com/facebook/react/pull/13407))+* Rename private field names used in the internals. ([@gaearon](https://github.com/gaearon) in [#18377](https://github.com/facebook/react/pull/18377))+* Don't call User Timing API in development. ([@gaearon](https://github.com/gaearon) in [#18417](https://github.com/facebook/react/pull/18417))+* Disable console during the repeated render in Strict Mode. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18547](https://github.com/facebook/react/pull/18547))+* In Strict Mode, double-render components without Hooks too. ([@eps1lon](https://github.com/eps1lon) in [#18430](https://github.com/facebook/react/pull/18430))+* Allow calling `ReactDOM.flushSync` during lifecycle methods to do nothing and warn. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18759](https://github.com/facebook/react/pull/18759))

"Allow" almost sounds like you should use it. Also unclear what the behavior was before. Maybe:

  • ReactDOM.flushSync will warn if called during a lifecycle method instead of throwing
gaearon

comment created time in 3 months

Pull request review commentfacebook/react

Bugfix: Missing mode check in resetChildLanes

 function resetChildLanes(completedWork: Fiber) {     (completedWork.tag === LegacyHiddenComponent ||       completedWork.tag === OffscreenComponent) &&     completedWork.memoizedState !== null &&-    !includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane))+    !includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane)) &&+    (completedWork.mode & ConcurrentMode) !== NoLanes

(NoMode)

acdlite

comment created time in 3 months

pull request commentfacebook/react

Transfer actualDuration only once for SuspenseList

can’t tell from your summary…

if each child has its own correct time but you’re counting the 1st child n times, 2nd child n – 1 times, etc, then it’s quadratic

conversely, if your time for child k includes the times for children 1 through k – 1, then it’s exponential

sebmarkbage

comment created time in 3 months

issue commentfacebook/react

DevTools: Uncaught error doesn't go away on page refresh

I'm specifically talking about the case where the devtools break due to an uncaught error. A working "Reload" on that error page would also be OK.

sophiebits

comment created time in 3 months

issue closedfacebook/react

Bug: parent will mount earlier than its suspending child

React version: 16.3.1

Steps To Reproduce

  1. use data fetching with suspense in latest release version (not concurrent mode)
  2. render a simple wrapper around SuspendingComponent as child of SuspenseBoundary

Link to code example

The current behavior

parent (wrapper around SuspendingComponent) will mount before child

The expected behavior

parent an child should mount after data received

closed time in 3 months

MHA15

issue commentfacebook/react

Bug: parent will mount earlier than its suspending child

I believe this is intended behavior for legacy (non-concurrent) mode, in order to preserve the invariant that if a render function completes successfully, then effects will run as well – the parent component is immediately hidden afterwards. In concurrent mode you'd see that the parent never completes mounting, which will be the future behavior, and it will be encouraged for anyone using data fetching with suspense to use concurrent mode or at least blocking mode: https://reactjs.org/docs/concurrent-mode-adoption.html#migration-step-blocking-mode.

(I'll remind you also that data fetching with suspense isn't officially supported yet.)

MHA15

comment created time in 3 months

issue commentfacebook/react

Feature proposal: let class component setState second param callback always give the latest state

React tends to not add more than one way to do something if the existing way is already clear and works well. I would say that this.state is quite straightforward and mirrors how you would always access state in a class component (so it’s one less thing to learn). One other minor issue I see with your proposal is that it would make the two arguments easier to confuse as both would take state then. Lastly, I would look to Hooks for where React is primarily evolving toward in the future.

Thanks for submitting this idea but it’s not likely to be implemented, so I’m going to close this.

fantasticsoul

comment created time in 3 months

issue closedfacebook/react

Feature proposal: let class component setState second param callback always give the latest state

Context

I know setState first param can be a updater

(state, props)=> stateChanged;

but why not the second callback param can not supply the latest state in its param list.

this.setState({msg:'new msg'}, (newState)=>{
    console.log(newState);// let user no need to write this.state here
})

Link to code example:

class Test extends React.Component{
  state = {msg:'msg'}
  changeMsg = ()=>{
    this.setState({msg:Date.now()}, (newState)=>{
      console.log(newState);// undefined
      console.log(this.state);// latest state
    });
  }
  render(){
    const msg = this.state.msg;
    return (
      <div>{msg} <input value={msg} onChange={this.changeMsg} /></div>
    );
  }
}

The current behavior

the newState is undefined

The expected behavior

the newState is the latest state

closed time in 3 months

fantasticsoul

issue openedfacebook/react

Bug: eslint exhaustive-deps doesn't recognize JSXIdentifier as used

function Component({reportType}) {
  let Report = Reports[reportType];
  let child = useMemo(() => {
    return <Report />;
  }, [Report]);

says that Report is an unnecessary dependency. It's not.

This is because eslint scope .references does not include JSX. I suspect if you pull in

https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/jsx-uses-vars.js

to your app's config then this won't happen. But maybe we should do something in the Hooks plugin itself too (since the others aren't officially recommended by the React team anyway).

created time in 3 months

issue openedfacebook/react

DevTools: Uncaught error doesn't go away on page refresh

  1. Wait for devtools to hit an error (eg: #18934).
  2. Reload the page.

Expected: Devtools reinitializes cleanly. Actual: Error is still there. Need to hide devtools, reload again, then show devtools to get it to behave.

DevTools version: 4.6.0-6cceaeb67

created time in 3 months

issue openedfacebook/react

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

Describe what you were doing when the bug occurred:

  1. Loaded page.
  2. Fast Refreshed.
  3. Started profiler.
  4. Stopped profiler. Crash.

Please do not remove the text below this line

DevTools version: 4.6.0-6cceaeb67

Call stack: at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:162638) at N (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:161628) at e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:164582) at ec (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:339280) at ci (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59620) at nl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:69923) at Ll (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:110996) at qc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102381) at Hc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102306) at Vc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102171)

Component stack: in ec in div in div in div in So in Unknown in n in Unknown in div in div in rl in Ze in fn in Ga in _s

created time in 3 months

pull request commentfacebook/react

useMutableSource: Allow returning function from getSnapshot

@dai-shi's use case of storing a constant function in your store like a state setter (https://github.com/dai-shi/use-context-selector/tree/v2) doesn't seem unreasonable to me, though it's not how I would write the code.

But more I noticed this while reading the code and I don't like things that are ostensibly agnostic to the value you put in them except fail on certain ones for no good reason – I assumed it was an oversight.

sophiebits

comment created time in 3 months

Pull request review commentfacebook/react

useMutableSource: Allow returning function from getSnapshot

 function useMutableSource<Source, Snapshot>(       const latestSetSnapshot = refs.setSnapshot;        try {-        latestSetSnapshot(latestGetSnapshot(source._source));+        const value = latestGetSnapshot(source._source);+        latestSetSnapshot(() => value);          // Record a pending mutable source update with the same expiration time.         const suspenseConfig = requestCurrentSuspenseConfig();

(nb: we still need some wrapper for the exceptions a few lines below this – we could maybe make something different for that to avoid allocating the function in the success case, but… I feel like this is fine?)

sophiebits

comment created time in 3 months

pull request commentfacebook/react

useMutableSource: Allow returning function from getSnapshot

@dai-shi It should.

sophiebits

comment created time in 3 months

PR opened facebook/react

Reviewers
useMutableSource: Allow returning function from getSnapshot

basicStateReducer strikes again.

+43 -2

0 comment

3 changed files

pr created time in 3 months

create barnchsophiebits/react

branch : ums-fn

created branch time in 3 months

PR opened facebook/react

Reviewers
Simplify logic for mutable workInProgressSources

isPrimaryRenderer is always constant for a given React build, so these two arrays do nothing.

+16 -36

0 comment

2 changed files

pr created time in 3 months

create barnchsophiebits/react

branch : simplify-sources

created branch time in 3 months

issue closedfacebook/react

Bug: using useCallback and useEffect at the same time messed my ref

Hey Guys,

I created a SignaturePad for my application that will pass the value later on to Formik. What I'm trying to do is to get the data from canvas and save it to my state using ref. toData() function returns array of points from the signature canvas. handleClear is to clear the canvas.

Related libraries in the project:

		"react": "^16.12.0",
		"react-bootstrap": "1.0.0-beta.16",
		"react-dom": "^16.12.0",
		"@material-ui/core": "^4.9.13",

I'm still new and trying to convert my whole application using hooks so I apologise if this is not a bug.

Problem 1:

I have some issue with using the useEffect and useCallback function of react. Previously before I add useEffect, handleClear function works just fine. However after I added useEffect, sigPad refs always returns null in handleClear.

Problem 2:

I realised after I removed the [sigPad] at handleClear I am able to receive the ref again. Which part of my code re-renders and how come useCallback does not realise that sigPad is changing from null to the correct ref?

Problematic code:

export function Signature() {
  let sigPad = useRef(null);
  const [sig, setSig] = useState("");
  const classes = formStyles();

  useEffect(() => {
    console.log(sigPad);
    setSig(sigPad.toData());
    console.log(sigPad);
  }, [sig]);
  const handleClear = useCallback(() => {
    console.log(sigPad);
    if (sigPad) sigPad.clear();
  }, [sigPad]);

  return (
    <div className="row">
      <Grid spacing={3} container>
        <Grid item xs={12}>
          <h3 className="text-bold">Signature</h3>
        </Grid>
        <Grid item xs={12}>
          <div className="sigCanvas">
            <SignatureCanvas
              penColor="black"
              canvasProps={{ className: "sigPad" }}
              ref={ref => {
                sigPad = ref;
              }}
            />
          </div>
        </Grid>
        <Grid item xs={3}>
          <Button
            variant="contained"
            component="label"
            className={classes.instructions}
            onClick={handleClear}
          >
            Clear
          </Button>
        </Grid>
        <Grid item xs={3}>
          <Button
            component="label"
            variant="contained"
            className={classes.instructions}
          >
            Save
          </Button>
        </Grid>
      </Grid>
    </div>
  );
}

Current Fix:

  const handleClear = useCallback(() => {
    console.log(sigPad);
    if (sigPad) sigPad.clear();
  });

Note: Before I add useEffect I don't have to remove the [sigPad] at my callback

closed time in 3 months

robertwt7

issue commentfacebook/react

Bug: using useCallback and useEffect at the same time messed my ref

You may want to review the useRef docs again. To store data in a ref across renders, you should assign to the .current property (i.e. sigPad.current = ... not sigPad = ...). You likely want just ref={sigPad} on SignatureCanvas which does essentially the same thing. Then read from sigPad.current to get the actual value (in your effect and clear handler).

robertwt7

comment created time in 3 months

more