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 144398

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

jonschlinkert/remarkable 4636

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 2665

RFCs for changes to React

sindresorhus/object-assign 847

ES2015 Object.assign() ponyfill

kentcdodds/modern-react 207

workshop about React's hottest new features in 16.7.0

sophiebits/adventofcode 17

Advent of Code Solutions

bvaughn/react 11

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.

PR opened facebookexperimental/rome

Fix typo: sparring -> sparing
+1 -1

0 comment

1 changed file

pr created time in 6 hours

push eventsophiebits/rome

Sophie Alpert

commit sha 39eb8911a2ea25b749475e018613fc9759ef6712

Fix typo: sparring -> sparing

view details

push time in 6 hours

fork sophiebits/rome

An experimental JavaScript toolchain

fork in 6 hours

pull request commentfacebook/react

Fixed a spelling mistake in a comment.

Good luck on future contributions! ;)

steveharrison

comment created time in a day

push eventfacebook/react

Steve Harrison

commit sha f3ecd56beacd4a2849a1bac4faab5d41b7ad758b

Fixed a spelling mistake in a comment. (#18119)

view details

push time in a day

PR merged facebook/react

Fixed a spelling mistake in a comment. CLA Signed

I'm beginning my journey to becoming a major React contributor! 😛

+1 -1

6 comments

1 changed file

steveharrison

pr closed time in a day

issue commentfacebook/react

Bug: [eslint-plugin-react-hooks] In comment, the version notation is broken.

I see, it is written here:

https://github.com/facebook/react/blob/0e49074f7a5ba3981ffd28387c8b7f891c7bad24/scripts/release/utils.js#L221-L224

pvcresin

comment created time in 2 days

PR closed reactjs/reactjs.org

Reviewers
Updated hooks-state docs to use setState with updater function CLA Signed

<!--

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

--> Docs mention that setState calls are batched and the state may be updated asynchronously. The example shown on https://reactjs.org/docs/hooks-state.html#equivalent-class-example uses the incorrect way of updating the state.

How it looks right now image

Correct Way image

This PR updates the example to use the correct implementation using an updater function.

Resolves #2739

+1 -1

4 comments

1 changed file

akshayymahajan

pr closed time in 3 days

pull request commentreactjs/reactjs.org

Updated hooks-state docs to use setState with updater function

React flushes state updates after a click so this is actually guaranteed to work. In addition, we're trying to keep this example as simple as possible to understand.

Thanks for the contribution though!

akshayymahajan

comment created time in 3 days

issue commentfacebook/react

Expected state to match memoized state before componentDidMount

I can't point to any concrete problems it will cause today, but I would recommend against it. There may be incompatibilities with future versions of React.

padlock98

comment created time in 3 days

issue commentfacebook/react

Bug: Unexpected render

@jddxf I guess so based on 790c8ef04195f0fc11ca3fb08e63f870f81483ac.

Is findCurrentFiberUsingSlowPath what would need to be called to know which one to look at? Is the supposition that that would be typically slower than executing the reducer?

I don't understand why we need to schedule an update at all. If the reducer is going to change, then we will rerender regardless by virtue of whatever is providing the reducer scheduling an update (eg: props if the reducer depends on props, context if the reducer depends on context).

If the reducer is not going to change, can we not have confidence that we can bail out? I don't think I understand the case where we can't try the eager execution. Is it that lastRenderedReducer may be from a future, uncommitted render?

TriStarGod

comment created time in 5 days

issue commentfacebook/react

Bug: Re-using an SVG element causes quirk with CSS styling

  1. Your React code uses class="svg" but it should be className="svg". (You should see a console warning for it.)
  2. Your html uses .button:hover .svg { color: blue; } but your styles.css uses .button:hover .path { fill: blue; }.

If you fix both of these, then they behave the same. Hope that helps.

tomkelsey

comment created time in 5 days

issue closedfacebook/react

Bug: Re-using an SVG element causes quirk with CSS styling

React version: 16.12.0

Steps To Reproduce

  1. Create an svg with an ID (Element A)
  2. Reuse Element A using <use> (Element B)
  3. Attempt to style the svg using css based on parent element's hover status
  4. Hovering over Element A causes the on hover styling to trigger on both Element A and Element B.

Link to code example:

https://codesandbox.io/s/elegant-microservice-gks3f

  • public/icon.html is plain html and shows how I anticipated it working. Hover over one button and that button's heart turns blue.
  • src/index.js is using react and shows how it currently works. Hover over the first button and both buttons' hearts turn blue. In addition, hovering over the second button doesn't cause anything to turn blue.

I believe both versions are fundamentally the same but apologies in advance if this behaviour is due to my own coding error!

The current behavior

Hovering over Element A causes the on hover styling to trigger on both Element A and Element B

The expected behavior

Hovering over Element A causes the on hover styling to only be triggered on Element A

closed time in 5 days

tomkelsey

issue closedfacebook/react

Question: How to remove dynamic children from Parent State?

I'm using react hook useContext. I have two identical components (siblings), each that use the same context that is a list.

Scenario

  1. The first sibling is created, calls useContext, and then pushes something into the list.
  2. The second sibling is then created, using the same useContext, and then pushes something into the list.

Issue The second sibling has the current state of list, which has two items, but the first sibling state is not updated with the second item that was pushed in by the second sibling

Expected That each component that is using the same useContext will be updated amongst all components that use the same context.

Is this a bug or am I misusing this? Any help or guidance is appreciated 🙇

closed time in 5 days

IanChok

issue commentfacebook/react

Question: How to remove dynamic children from Parent State?

The issue is that your addChild function is referring to a copy of the removeChild function that is using an older copy of state. So when you click and removeChild runs, the state in that function is actually the state at the time the child was created.

A couple ways to fix this:

  1. In most cases you would want to construct the React elements (<DynamicChild />) at render time rather than storing them in state. For example, you can store just {id} in state, then render {state.map(child => <DynamicChild id={child.id} key={child.id} removeChild={removeChild} />)} instead of {state.map(child => child.child)} below.

  2. You can rewrite removeChild to use the functional setState form, which always receives the latest state. That would look something like:

const removeChild = id => {
  setState(oldState => {
    return oldState.filter(child => child.id !== id);
  });
};

I verified that both of these would fix your issue.

This is a subtle issue. If you don't have a full understanding based on what I just wrote, these blog posts may help – they cover some similar questions:

https://overreacted.io/how-are-function-components-different-from-classes/ https://overreacted.io/making-setinterval-declarative-with-react-hooks/

I'm going to close this, as it isn't a bug in React. Next time, if you need help with your code, please see our community resources at: https://reactjs.org/community/support.html

IanChok

comment created time in 5 days

issue closedfacebook/react

[eslint-plugin-react-hooks] useReducer purity warning

Apparently useReducer shouldn't perform side effects like firing async actions or updating state, so I think there should be an eslint warning for that.

closed time in 5 days

hug0b

issue commentfacebook/react

[eslint-plugin-react-hooks] useReducer purity warning

As vkurchatkin says, there isn't a good way to lint for this. Thanks for the idea though.

hug0b

comment created time in 5 days

issue closedfacebook/react

Question: It's not problem just question in my mind

Why all implements of hooks in react-dom and we have to import from react? Just I want to know about it

closed time in 5 days

uxitten

issue commentfacebook/react

Question: It's not problem just question in my mind

In general, the methods you need to define a component are in the React package. This makes it possible to make a single component that works across different renderers, as long as it doesn't use any DOM-specific features. Hope that helps.

I'm going to close this, as it isn't a React issue. If you have more questions, please see our community resources at: https://reactjs.org/community/support.html (this issue tracker is for bugs in React).

uxitten

comment created time in 5 days

issue closedfacebook/react

Context API not working in production

Hi! React Context works perfectly on my application on development environment with Webpacker but when I precompile my assets to serve my application in production environment it throw me TypeError: undefined is not an object (evaluating 'n.context.user.username') error. I tried implementing all the suggested solutions but it still didn't work. I upgrade the versions: to "react": "^16.7.0", "react-dom": "^16.6.0" and defining the Context creation in a separate file. The app will work fine if we use <UserContext.Consumer/> but want to stick to try our best to stick to the contextType method. Would appreciate any help. Thank you.

Link to code example:

Context Creation https://github.com/VantageSG/Vantage/blob/master/app/javascript/contexts/UserContext.jsx

Context Provider https://github.com/VantageSG/Vantage/blob/master/app/javascript/components/App.jsx

Context Consumer https://github.com/VantageSG/Vantage/blob/master/app/javascript/components/navBar/desktopNavBar.jsx

React version: 16.6

The current behavior

TypeError: undefined is not an object (evaluating 'n.context.user.username') error

The expected behavior

Context API working properly.

closed time in 5 days

klementtan

issue commentfacebook/react

Context API not working in production

At a glance your code looks correct. Try upgrading react and react-dom to the same version. I'm not sure but since it sounds like you are using different versions, it's possible that's related.

In addition, newer versions of React have warnings related to misusing contextType that may be helpful if you are hitting one of those cases.

I'm going to close this, as it likely isn't a bug in React. If you think that there is an issue with React, could you please go ahead and post a minimal repro case so that we can look into it?

klementtan

comment created time in 5 days

issue closedfacebook/react

I'm working on React project.And i got these errors

npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! enlite_starter@1.3.1 build: cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the enlite_starter@1.3.1 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! ### ### C:\Users\Swetha\AppData\Roaming\npm-cache_logs\2020-02-19T06_52_25_635Z-debug.log

closed time in 5 days

saichandhra

issue commentfacebook/react

I'm working on React project.And i got these errors

I'm going to close this, as it isn't a React issue. If you need help, see: https://reactjs.org/community/support.html

saichandhra

comment created time in 5 days

issue commentfacebook/react

Bug: [eslint-plugin-react-hooks] In comment, the version notation is broken.

Confirmed.

v2.3.0: https://unpkg.com/eslint-plugin-react-hooks@2.3.0/cjs/eslint-plugin-react-hooks.development.js

vundefined: https://unpkg.com/eslint-plugin-react-hooks@2.4.0/cjs/eslint-plugin-react-hooks.development.js

The root package.json doesn't have a version so I'm confused how this ever worked…

https://github.com/facebook/react/blob/78e816032c8af962343abbf384e06f3e9bae9269/scripts/rollup/wrappers.js#L67

pvcresin

comment created time in 5 days

issue closedfacebook/react

Question: what react useCallback do when i pass object in first argument

I am fixing an infinite loop when using react with useEffect and useCallback.

const fetchApi =useCallback(()=>{
    setIsLoading(true)
      fetchDataFunction({
        resolve(res) {
          setFetchData(fromJS(res))
          setIsLoading(false)
        }
      })
},[param])
useEffect(()=>{
    fetchApi()
},[fetchApi])

It is causing an infinite loop. However, if I change the code as shown below

const fetchApi = useCallback({
    fetchApiFunc() {
      setIsLoading(true)
      fetchDataFunction({
        resolve(res) {
          setFetchData(fromJS(res))
          setIsLoading(false)
        }
      })
    }
  },[params])
  const { fetchApiFunc } = fetchApi
  useEffect(() => {
    fetchApiFunc()
  }, [fetchApiFunc])

the problem is fixed. But I still do not understand what it does when the object in first argument in useCallback.

Thank you.

closed time in 5 days

KenYPS

issue commentfacebook/react

Question: what react useCallback do when i pass object in first argument

This issue tracker isn't for support questions. Please refer to the React community's help and discussion forums: https://reactjs.org/community/support.html

KenYPS

comment created time in 5 days

issue closedfacebook/react

Expected state to match memoized state before componentDidMount

Upgrading meteor (from 1.4 to 1.7) and react (from 15.3.2 to 16.8.6) and got this warning at browser console:

Warning: Expected Container(Container(withRouter(List))) state to match memoized state before componentDidMount. This might either be because of a bug in React, or because a component reassigns its own `this.props`. Please file an issue.
    in Container(Container(withRouter(List))) (created by UseDeps(Container(Container(withRouter(List)))))
    in UseDeps(Container(Container(withRouter(List)))) (created by RouterContext)
    in div (created by Layout)
    in div (created by Content)
    in Content (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in MDLComponent (created by Layout)
    in Layout (created by Layout)
    in Layout (created by WithDeps(Layout))
    in WithDeps(Layout) (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider
    in Unknown

Note: My codes ain't using react-css-modules or having this.props = ... syntax as suggested in https://github.com/facebook/react/issues/14224

React version: 16.8.6

Steps To Reproduce

Here is my code (which I have narrowed down to, likely at onPropsChange part)

list.js

import {useDeps, composeAll, compose} from 'mantra-core-extra';
import composeWithTracker from '../../core/libs/utils/compose-with-tracker';

import List from '../components/list.jsx';

import Tickets from '../../../../lib/collections';

const composer = ({context}, onData) => {
  const {Meteor, Store} = context();
  if (Meteor.subscribe('tickets').ready()) {
    let filters = Object.assign({}, Store.getState().tickets.list.filters);
    if (filters.date) {
      filters['createdAt'] = {$gt: filters.date.range.start, $lt: filters.date.range.end};
      delete filters['date'];
    }

    let total = Tickets.find(filters).count();
    const tickets = Tickets.find(filters, {
      sort: {[Store.getState().tickets.list.sort.field]: Store.getState().tickets.list.sort.order ? 1 : -1},
      skip: Store.getState().tickets.list.page * Store.getState().tickets.list.range,
      limit: Store.getState().tickets.list.range,
    }).fetch();
    onData(null, {tickets, total});
  }
};

const onPropsChange = ({context}, onData) => {
  const {Store} = context();
  onData(null, Store.getState().tickets);
  return Store.subscribe(() => {
    onData(null, Store.getState().tickets);
  });
};

const depsMapper = (context, actions) => ({
  select: actions.ticket.select,
  unselect: actions.ticket.unselect,
  remove: actions.ticket.remove,
  changePage: actions.ticket.changePage,
  sortField: actions.ticket.sort,
  changeCategory: actions.ticket.changeCategory,
  changeStatus: actions.ticket.changeStatus,
  changeDate: actions.ticket.changeDate,
  find: actions.ticket.find,
  context: () => context
});

export default composeAll(
  composeWithTracker(composer),
  compose(onPropsChange),
  useDeps(depsMapper)
)(List);

The current behavior

Causing table listing not appearing in my case.

The expected behavior

Table with rows of data to be listed

closed time in 5 days

padlock98

issue commentfacebook/react

Expected state to match memoized state before componentDidMount

@jddxf is right; this warning should reference this.state – #18103 will address that.

As for why you're encountering this in your own app, it's almost certainly because you are reassigning this.state (or one of your dependencies is). Unfortunately we can't help much without a repro case – if you try to look at your app and can't find where that assignment could be, then post a way to repro this and we can investigate.

(If you find that you're hitting this where no one is setting this.state, that would likely be a bug in React and we can reopen in that case.)

padlock98

comment created time in 5 days

PR opened facebook/react

Fix typo in warning text

Mentioned in #18090.

+4 -4

0 comment

1 changed file

pr created time in 5 days

push eventsophiebits/react

Sophie Alpert

commit sha 76f9d922d47d856350e9517a02aa8e1e835f5e3e

Fix typo in warning text Mentioned in #18090.

view details

push time in 5 days

create barnchsophiebits/react

branch : gh-18090-warn

created branch time in 5 days

issue closedfacebook/react

40 errors associated with this file

https://i.imgur.com/o4MKh9p.jpg

https://github.com/reactjs/reactjs.org

I decided to try react and reactjs.org and saw a lot of errors.

i use windows

Strange, but even with these errors the site seems to work.

GET http://0.0.0.0:8000/__webpack_hmr net::ERR_ADDRESS_INVALID

C:/react/reactjs.org/node_modules/react-error-overlay/lib/index.js:2172 Warning: The <HeaderLink /> component appears to be a function component that returns a class instance. Change HeaderLink to a class that extends React.Component instead. If you can't use a class try assigning the prototype on the function as a workaround. `HeaderLink.prototype = React.Component.prototype`. Don't use an arrow function since it cannot be called with `new` by React.

C:/react/reactjs.org/node_modules/react-error-overlay/lib/index.js:2172 Warning: The <Header /> component appears to be a function component that returns a class instance. Change Header to a class that extends React.Component instead. If you can't use a class try assigning the prototype on the function as a workaround. `Header.prototype = React.Component.prototype`. Don't use an arrow function since it cannot be called with `new` by React.



__stack_frame_overlay_proxy_console__ | @ | C:/react/reactjs.org…y/lib/index.js:2172
-- | -- | --
  | warningWithoutStack | @ | C:/react/reactjs.org….development.js:530
  | mountIndeterminateComponent | @ | C:/react/reactjs.org…evelopment.js:18805
  | beginWork$1 | @ | C:/react/reactjs.org…evelopment.js:20162
  | beginWork$$1 | @ | C:/react/reactjs.org…evelopment.js:25756
  | performUnitOfWork | @ | C:/react/reactjs.org…evelopment.js:24695
  | workLoopSync | @ | C:/react/reactjs.org…evelopment.js:24671
  | performSyncWorkOnRoot | @ | C:/react/reactjs.org…evelopment.js:24270
  | scheduleUpdateOnFiber | @ | C:/react/reactjs.org…evelopment.js:23698
  | updateContainer | @ | C:/react/reactjs.org…evelopment.js:27103
  | eval | @ | C:/react/reactjs.org…evelopment.js:27528
  | unbatchedUpdates | @ | C:/react/reactjs.org…evelopment.js:24433
  | legacyRenderSubtreeIntoContainer | @ | C:/react/reactjs.org…evelopment.js:27527
  | render | @ | C:/react/reactjs.org…evelopment.js:27608
  | eval | @ | C:/react/reactjs.org/.cache/app.js:94
  | setTimeout (async) |   |  
  | eval | @ | C:/react/reactjs.org…omready/ready.js:26
  | eval | @ | C:/react/reactjs.org/.cache/app.js:93
  | Promise.then (async) |   |  
  | eval | @ | C:/react/reactjs.org/.cache/app.js:91
  | Promise.then (async) |   |  
  | eval | @ | C:/react/reactjs.org/.cache/app.js:48
  | eval | @ | C:/react/reactjs.org/.cache/app.js:130
  | ./.cache/app.js | @ | commons.js:827
  | __webpack_require__ | @ | commons.js:725
  | fn | @ | commons.js:102
  | eval | @ | C:/react/reactjs.org…js.org/.cache/app:3
  | 0 | @ | commons.js:5470
  | __webpack_require__ | @ | commons.js:725
  | (anonymous) | @ | commons.js:792
  | (anonymous) | @ | commons.js:795


closed time in 5 days

Corsairs

issue commentfacebook/react

40 errors associated with this file

I think this may be caused by gatsby using the react-hot-loader, an unsupported project – but in any event, this isn't a bug in React so I'm going to close this issue. Thanks for filing.

(If you have an idea of how to fix the error, feel free to send a PR to the reactjs.org repo.)

Corsairs

comment created time in 5 days

issue commentfacebook/react

Bug: Unexpected render

Interesting.

I think this is a bug. Failing test case: https://github.com/facebook/react/compare/master...sophiebits:gh-18098.

In the following check, alternate.expirationTime is NoWork but fiber.expirationTime is not, I think due to the preceding render:

https://github.com/facebook/react/blob/78e816032c8af962343abbf384e06f3e9bae9269/packages/react-reconciler/src/ReactFiberHooks.js#L1322-L1325

cc @acdlite

TriStarGod

comment created time in 5 days

create barnchsophiebits/react

branch : gh-18098

created branch time in 5 days

issue closedfacebook/react

Modify the Child-component's state from props of Parent-component by static getDerivedStateFromProps

Recently, I've gone through the use of componentWillReceiveProps(), which helps us to update props in the child component whenever they update in the parent component and also helps us to modify these props in the child component. But, it is being deprecated. Now, we've static getDerivedStateFromProps(), which is supposed to achieve the same functionality, as said-- getDerivedStateFromProps exists for only one purpose. It enables a component to update its internal state as the result of changes in props.

Now, I want to get the updated props in my Child component, as soon as they update in the Parent component. Also, I want to update those props after setting them in the state of the Child component. But getDerivedStateFromProps() executes in every state-mutation, unlike componentWillReceiveProps() which calls only when the props get updated from Parent-component. How can I able to set props in the child-component's state and mutate it in that component itself, i.e. similar to componentWillReceiveProps?

closed time in 5 days

yogendra3236

issue commentfacebook/react

Modify the Child-component's state from props of Parent-component by static getDerivedStateFromProps

It's a little hard to understand your message. This blog post may be helpful for understanding how and when to use getDerivedState:

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Are you trying to modify the props of a parent component from a child? That isn't how React works. See this guide for more: https://reactjs.org/docs/thinking-in-react.html

I'm going to close this as it isn't an issue with React. If you're still having trouble, try asking on Stack Overflow or another community resource (https://reactjs.org/community/support.html).

yogendra3236

comment created time in 5 days

issue openedfacebook/react

Arbitrary log lines may appear in between an error and the subsequent "The above error…" message

React version: 16.12

If one component throws, and one of its siblings logs something else to the console, that sibling's logs appear in between the throwing component and the extra React information about that throw.

This is hard to explain in words but easy to explain in code and pictures, so look:

Repro: https://codesandbox.io/s/boring-firefly-bu79e

image

Instead, I would expect "The above error…" to be right below the uncaught window-level exception we raise. (Maybe this isn't possible without diverging dev vs. prod behavior? Not sure but thought I'd file…)

created time in 5 days

pull request commentfacebook/react

Rename Chunks API to Blocks

Looking forward to buying the React-branded LEGO blocks.

also, chunk + block = chonk?

sebmarkbage

comment created time in 7 days

Pull request review commentfacebook/react

Add Auto Import to Babel Plugin

 var div = React.jsx(Component, Object.assign({}, props, { })); `; +exports[`transform react to jsx auto import can specify source 1`] = `+import * as _foobar from "foobar";++var x = _foobar.jsx("div", {+  children: _foobar.jsx("span", {})+});+`;++exports[`transform react to jsx auto import default 1`] = `+import _default from "react";++var x = _default.jsx(_default.Fragment, {+  children: _default.jsxs("div", {+    children: [_default.jsx("div", {}, "1"), _default.jsx("div", {+      meow: "wolf"+    }, "2"), _default.jsx("div", {}, "3"), _default.createElement("div", Object.assign({}, props, {+      key: "4"+    }))]+  })+});+`;++exports[`transform react to jsx auto import in dev 1`] = `+import { createElement as _createElement } from "react";+import { jsxDEV as _jsxDEV } from "react";+import { Fragment as _Fragment } from "react";+var _jsxFileName = "";++var x = _jsxDEV(_Fragment, {+  children: _jsxDEV("div", {+    children: [_jsxDEV("div", {}, "1", false, {+      fileName: _jsxFileName,+      lineNumber: 4+    }, this), _jsxDEV("div", {+      meow: "wolf"+    }, "2", false, {+      fileName: _jsxFileName,+      lineNumber: 5+    }, this), _jsxDEV("div", {}, "3", false, {+      fileName: _jsxFileName,+      lineNumber: 6+    }, this), _createElement("div", Object.assign({}, props, {+      key: "4",+      __source: {+        fileName: _jsxFileName,+        lineNumber: 7+      },+      __self: this+    }))]+  }, undefined, true, {+    fileName: _jsxFileName,+    lineNumber: 3+  }, this)+}, undefined, false);+`;++exports[`transform react to jsx auto import named exports 1`] = `+import { createElement as _createElement } from "react";+import { jsx as _jsx } from "react";+import { jsxs as _jsxs } from "react";+import { Fragment as _Fragment } from "react";++var x = _jsx(_Fragment, {+  children: _jsxs("div", {+    children: [_jsx("div", {}, "1"), _jsx("div", {+      meow: "wolf"+    }, "2"), _jsx("div", {}, "3"), _createElement("div", Object.assign({}, props, {+      key: "4"+    }))]+  })+});+`;++exports[`transform react to jsx auto import namespace 1`] = `+import * as _react from "react";++var x = _react.jsx(_react.Fragment, {

I believe I tested this once with React.createElement in V8 and found it didn't make a significant difference (IIRC slightly worse; definitely wasn't better or I would've gone through with it).

lunaruan

comment created time in 13 days

pull request commentreactjs/rfcs

New RFC: Mechanism to substitute the react build.

Yes. Still think it’s a good idea.

Gaelan

comment created time in 15 days

PR closed reactjs/reactjs.org

Use correct method of updating state in useState docs CLA Signed

This pr updates a code snippet in the docs for useState in which the snippet show the analogous method of updating state in class components. This follows the practice of updating state shown in https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

+1 -1

4 comments

1 changed file

jgarciabengochea

pr closed time in 17 days

pull request commentreactjs/reactjs.org

Use correct method of updating state in useState docs

React will make sure that the state updates are flushed after each click, and we're intentionally don't want to overcomplicate this example, so it's good as-is. Thanks for asking!

jgarciabengochea

comment created time in 17 days

push eventreactjs/reactjs.org

Jakub Drozdek

commit sha 4367566bddd06ed9dfbd6b1c3f45f9925e60b2c3

Remove part about stateless components (#2694)

view details

push time in 17 days

PR merged reactjs/reactjs.org

Remove outdated info in react-without-jsx CLA Signed

Since Hooks were introduced to React, using plain functions to create components is not the same as creating stateless components.

+1 -1

3 comments

1 changed file

jakubdrozdek

pr closed time in 17 days

PR closed reactjs/reactjs.org

Update hooks-state.md

In the chapter API REFERENCE React.Component setState() https://reactjs.org/docs/react-component.html#setstate I read :

If the next state depends on the current state, we recommend using the updater function form, instead: this.setState((state) => { return {quantity: state.quantity + 1}; });

Isn't that this case?

<!--

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

-->

+2 -1

4 comments

1 changed file

Aliaksandrsen

pr closed time in 17 days

pull request commentreactjs/reactjs.org

Update hooks-state.md

React will make sure that the state updates are flushed after each click, and we're intentionally don't want to overcomplicate this example, so it's good as-is. Thanks for asking!

Aliaksandrsen

comment created time in 17 days

push eventreactjs/reactjs.org

Sam Cook

commit sha e5edde701a268564c21c56b2324a6bed1b0de2ff

Corrected minor grammar issue (#2726) On line 40, the phrase following the 'comma and' should be independent (i.e., contain a subject). Alternatively, the comma preceding the 'and' should be deleted, making the dependent clause following the 'and' grammatically acceptable.

view details

push time in 17 days

PR merged reactjs/reactjs.org

Corrected minor grammar issue CLA Signed

On line 40, the phrase following the 'comma and' should be independent (i.e., contain a subject). Alternatively, the comma preceding the 'and' should be deleted, making the dependent clause following the 'and' grammatically acceptable.

<!--

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

sjc5

pr closed time in 17 days

pull request commentfacebook/react

Re-enable shorthand CSS property collision warning

Renamed the test and removed the feature flag from it.

sophiebits

comment created time in 17 days

push eventsophiebits/react

Sophie Alpert

commit sha 9010d93cef81639e0ba8e69807fd954c705b6c91

Re-enable shorthand CSS property collision warning Originally added in https://github.com/facebook/react/pull/14181; disabled in https://github.com/facebook/react/pull/14245. Intention was to enable it in React 16.7 but we forgot.

view details

push time in 17 days

push eventreactjs/reactjs.org

Sophie Alpert

commit sha c9fe940cb0a7eb6acffa546641a43178ed849e89

Update faq-versioning.md It's 2020 already.

view details

push time in 18 days

create barnchsophiebits/react

branch : shorthand-collision

created branch time in 19 days

PR opened facebook/react

Re-enable shorthand CSS property collision warning

Originally added in https://github.com/facebook/react/pull/14181; disabled in https://github.com/facebook/react/pull/14245. Intention was to enable it in React 16.7 but we forgot.

+7 -7

0 comment

7 changed files

pr created time in 19 days

IssuesEvent
IssuesEvent

issue commentfacebook/react

Shorthand CSS property collision should trigger a warning

@acdlite @gaearon Can we unflag this?

rdsedmundo

comment created time in 23 days

issue commentgaearon/react-side-effect

Replace `UNSAFE_componentWillMount` with `constructor`

Renaming to constructor isn't the correct fix as it won't be properly compatible with concurrent mode, where the render phase (including the constructor) might be called more than once.

voodoocreation

comment created time in a month

Pull request review commentgatsbyjs/gatsby

Accessible Routing

 function init() {   maybeRedirect(window.location.pathname) } +class RouteAnnouncer extends React.Component {+  constructor(props) {+    super(props)+    this.announcementRef = React.createRef()+  }++  componentDidUpdate(prevProps, nextProps) {+    requestAnimationFrame(() => {+      let pageName = `new page at ${this.props.location.pathname}`+      if (document.title) {+        pageName = document.title+      }+      const pageHeadings = document+        .getElementById(`gatsby-focus-wrapper`)+        .getElementsByTagName(`h1`)+      if (pageHeadings && pageHeadings.length) {+        pageName = pageHeadings[0].textContent+      }+      const newAnnouncement = `Navigated to ${pageName}`+      const oldAnnouncement = this.announcementRef.current.innerText+      if (oldAnnouncement !== newAnnouncement) {+        this.announcementRef.current.innerText = newAnnouncement+      }+    })+  }++  render() {+    return (+      <div+        id="gatsby-announcer"+        style={{

Former React team manager here – I can guarantee this will never be a performance problem and there is nothing wrong with writing the style object like this. I’d recommend you stop worrying about microoptimizing code.

madalynrose

comment created time in a month

Pull request review commentgatsbyjs/gatsby

Accessible Routing

 function init() {   maybeRedirect(window.location.pathname) } +class RouteAnnouncer extends React.Component {+  constructor(props) {+    super(props)+    this.announcementRef = React.createRef()+  }++  componentDidUpdate(prevProps, nextProps) {+    requestAnimationFrame(() => {+      let pageName = `new page at ${this.props.location.pathname}`+      if (document.title) {+        pageName = document.title+      }+      const pageHeadings = document+        .getElementById(`gatsby-focus-wrapper`)+        .getElementsByTagName(`h1`)+      if (pageHeadings && pageHeadings.length) {+        pageName = pageHeadings[0].textContent+      }+      const newAnnouncement = `Navigated to ${pageName}`+      const oldAnnouncement = this.announcementRef.current.innerText

@blainekasten Suspense won’t change anything here.

It’s impossible for the ref to be null during componentDidUpdate, though note that because of the rAF call it is possible (though probably unlikely) for the component to unmount before this code runs, so a check is appropriate.

madalynrose

comment created time in a month

push eventreactjs/reactjs.org

David Cho-Lerat

commit sha 99a18287c163e328f87709cb224742ccac3e113a

Update testing-environments.md (#2665) Remove extraneous "both"

view details

push time in 2 months

PR merged reactjs/reactjs.org

Update testing-environments.md CLA Signed

Remove extraneous "both"

+1 -1

1 comment

1 changed file

ElRatonDeFuego

pr closed time in 2 months

PR closed reactjs/reactjs.org

Actualizando documentacion

Pruebas

<!--

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

-->

+2 -2

3 comments

1 changed file

JoseOsvaldoHernandezRito

pr closed time in 2 months

pull request commentreactjs/reactjs.org

Actualizando documentacion

This is the English version of the docs you’re changing.

JoseOsvaldoHernandezRito

comment created time in 2 months

PR closed reactjs/reactjs.org

'setState' to 'useState'

Change names hooks.

<!--

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

-->

+2 -2

3 comments

1 changed file

vlad3k

pr closed time in 2 months

pull request commentreactjs/reactjs.org

'setState' to 'useState'

It’s correct as written. The text is describing the second value that useState returns, which is a setState function.

vlad3k

comment created time in 2 months

push eventreactjs/reactjs.org

Ben Schwarz

commit sha dedacfbc53a53678d7cc77819715e77f9eb7cc53

Updated URL to react performance article (#2670)

view details

push time in 2 months

PR merged reactjs/reactjs.org

Updated URL to react performance article CLA Signed

We've since moved all of our articles away from Medium as a publishing platform.

This PR update the URL to the canonical source on the Calibre site.

+1 -1

1 comment

1 changed file

benschwarz

pr closed time in 2 months

PR opened gaearon/overreacted.io

Fix typo
+2 -2

0 comment

1 changed file

pr created time in 2 months

push eventsophiebits/overreacted.io

Sophie Alpert

commit sha 7a93b6d91cd5378efd8db73f9464fac1b1ff0d58

Fix typo

view details

push time in 2 months

pull request commentreactjs/reactjs.org

Fix sample test code

Thanks!

numb86

comment created time in 2 months

push eventreactjs/reactjs.org

numb86

commit sha 1e4159d11d1c34013e191d4ab463bb99b0b3a169

Fix sample test code (#2648)

view details

push time in 2 months

PR merged reactjs/reactjs.org

Fix sample test code CLA Signed

Since the initial value of state is false, the first displayed text is Turn on. I actually wrote the code and confirmed it.

+2 -2

1 comment

1 changed file

numb86

pr closed time in 2 months

push eventmknapper1/reactjs.org

Sophie Alpert

commit sha 32b17d490aa02fbcaef402ef01f44ae67df2bb91

Update hooks-faq.md

view details

push time in 2 months

push eventreactjs/reactjs.org

Evrim Persembe

commit sha 24ebabd01e9aefddcff5615a251e8c9d09fe085e

Update "Refs and the DOM" documentation (#2657) * Update "Refs and the DOM" documentation As function components can now have state through hooks, remove the part that mentions converting a function component to a class component to be able to use state. * Update refs-and-the-dom.md Co-authored-by: Sophie Alpert <git@sophiebits.com>

view details

push time in 2 months

PR merged reactjs/reactjs.org

Update "Refs and the DOM" documentation CLA Signed

As function components can now have state through hooks, remove the part that mentions converting a function component to a class component to be able to use state.

<!--

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

-->

+2 -2

2 comments

1 changed file

evrimfeyyaz

pr closed time in 2 months

pull request commentreactjs/reactjs.org

Update "Refs and the DOM" documentation

Merged with a couple tweaks, thanks!

evrimfeyyaz

comment created time in 2 months

push eventevrimfeyyaz/reactjs.org

Sophie Alpert

commit sha 3dd2faf9d52cd0521735f94af885353d00dfa2b8

Update refs-and-the-dom.md

view details

push time in 2 months

PR closed reactjs/reactjs.org

Replace var with const CLA Signed

I replaced var with const in the document below. https://reactjs.org/docs/hooks-state.html#tip-what-do-square-brackets-mean

Reference: https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#use-const-where-possible-otherwise-let-dont-use-var

+3 -3

5 comments

1 changed file

tanabee

pr closed time in 2 months

pull request commentreactjs/reactjs.org

Replace var with const

Agreed; it was intended to be written this way. Thank you for contributing though!

tanabee

comment created time in 2 months

push eventreactjs/reactjs.org

Vinoth Kumar

commit sha 071f5b0e1622465fb6fe5cf6c1cbd2aaef7c5ef4

Update introducing-jsx.md (#2660) * Update introducing-jsx.md * Fix formatting Co-authored-by: Sophie Alpert <git@sophiebits.com>

view details

push time in 2 months

PR merged reactjs/reactjs.org

Update introducing-jsx.md CLA Signed

<!--

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

-->

+0 -1

1 comment

1 changed file

vnoitkumar

pr closed time in 2 months

push eventvnoitkumar/reactjs.org

Sophie Alpert

commit sha 9ba7ee06f9b780adfb4ff162fffb898fe6dd1cff

Fix formatting

view details

push time in 2 months

CommitCommentEvent

push eventreactjs/reactjs.org

Vinoth Kumar

commit sha f2cffb8ca4c767d98174bb9466f191f73f309df1

Link is not working (Domain expried) (#2636)

view details

push time in 2 months

PR merged reactjs/reactjs.org

Link is not working (Domain expried) CLA Signed

<!--

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

-->

+2 -1

4 comments

1 changed file

vnoitkumar

pr closed time in 2 months

Pull request review commentreactjs/reactjs.org

Link is not working (Domain expried)

 We will explore rendering React elements to the DOM in the next section.  >**Tip:** >->We recommend using the ["Babel" language definition](https://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://github.com/voronianski/oceanic-next-color-scheme) color scheme which is compatible with it.+
vnoitkumar

comment created time in 2 months

Pull request review commentreactjs/reactjs.org

Fix typo in hooks-faq.md

 Depending on your use case, there are a few more options described below.  Let's see why this matters. -If you specify a [list of dependencies](/docs/hooks-reference.html#conditionally-firing-an-effect) as the last argument to `useEffect`, `useMemo`, `useCallback`, or `useImperativeHandle`, it must include all values used inside that participate in the React data flow. That includes props, state, and anything derived from them.+If you specify a [list of dependencies](/docs/hooks-reference.html#conditionally-firing-an-effect) as the last argument to `useEffect`, `useMemo`, `useCallback`, or `useImperativeHandle`, it must include all values used within the function to participate in the React data flow. That includes props, state, and anything derived from them.
If you specify a [list of dependencies](/docs/hooks-reference.html#conditionally-firing-an-effect) as the last argument to `useEffect`, `useMemo`, `useCallback`, or `useImperativeHandle`, it must include all values that are used inside the function and that participate in the React data flow. That includes props, state, and anything derived from them.
mknapper1

comment created time in 2 months

pull request commentreactjs/reactjs.org

Fix typo in hooks-faq.md

I think this is correct as written (although maybe not easy to read), and your suggested edit changes the meaning.

mknapper1

comment created time in 2 months

push eventsophiebits/blog

Sophie Alpert

commit sha 97b243e116fbe566352e0e6b3fdc6b89be91fe01

Fix date on post

view details

push time in 2 months

push eventsophiebits/blog

Sophie Alpert

commit sha 34e85053217531f23794de8e917062fbef1e96a5

Upgrade gems, update theme

view details

Sophie Alpert

commit sha 745586d25baeaf4bfdfc6bf245d0fd2ce92b6ccf

Fast and maintainable patterns for fetching from a database

view details

push time in 2 months

pull request commentfacebook/react

Make uncontrolled -> controlled warning clearer

  • The %s placeholder here is not the value type but rather the input type (checkbox, radio, etc). However I don’t think we need this info any more since we have robust component stacks in warnings. So let’s just remove that substitution and say “undefined value”.
  • You’ll need to update any tests that are verifying this warning message.
  • Other than that, this is a great improvement! Any chance you can make the above improvements? Then this can be merged.
vcarl

comment created time in 2 months

push eventreactjs/reactjs.org

Sophie Alpert

commit sha 6788666b0d7057b1c72f893f5f04dce1405aa683

Make link text for toolchain setup clearer Fixes #2437.

view details

push time in 2 months

issue closedreactjs/reactjs.org

Why does the main page of React not give an EXACT INSTALLATION GUIDE for actual developers?

Have an advanced option to install React and a page showing all the other things which should be upgraded installed for React.

closed time in 2 months

cyphire

issue commentreactjs/reactjs.org

Minimum system requirement for React JS ?

Any machine with a code editor and a browser should be able to develop for React. Here's the most barebones way: https://reactjs.org/docs/add-react-to-a-website.html

hamza5746

comment created time in 2 months

issue closedreactjs/reactjs.org

usePrevious hook is buggy

https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state

Using useEffect is dangerous since it is not guaranteed to run. Here is an example where useEffect is not run on each render: https://codesandbox.io/s/react-hooks-useeffect-pt41r?fontsize=14

When useEffect is not triggered, the usePrevious risks causing bugs, like infinite loops.

The hook could instead be written like this, simpler and with no bugs:

export function usePrevious<T>(value: T) {
  const ref = useRef<T>()
  const prevValue = ref.current
  ref.current = value
  return prevValue
}

I wouldn't mind writing a PR myself if someone can confirm that my thinking is right.

closed time in 2 months

pgsandstrom

issue commentreactjs/reactjs.org

usePrevious hook is buggy

(I'll close this as I don't think this is a problem with the docs, but feel free to reply.)

pgsandstrom

comment created time in 2 months

issue closedreactjs/reactjs.org

Where do I can edit page in my language?

I detect a grammar mistake in this page https://vi.reactjs.org/docs/hooks-effect.html and I want to edit this. So, where do I can edit and create pull request by what rule?

closed time in 2 months

namnguyen2091

issue commentreactjs/reactjs.org

Problem with recommending startTransition in design system event handlers?

I'm also curious about this. @acdlite @sebmarkbage Any best practices to recommend here?

sschottler

comment created time in 2 months

more