profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/kimjoar/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Kim Joar Bekkelund kimjoar Oslo, Norway http://kimjoar.net Software engineer @cognitedata. Previously @facebook @elastic @bekk

ewendel/react-workshop 40

React.js Workshop

eiriklied/ruby-kurs-uia 2

Ruby kurs for Universitetet i Agder

kimjoar/backbone-fundamentals 1

A creative-commons book on Backbone.js for beginners and advanced users alike

kimjoar/backbone-subViewHandler 1

Improve subview handling in your Backbone app

ewendel/isomorphic-tutorial 0

Tutorial app to demonstrate isomorphic JavaScript concepts.

kimjoar/acts_as_api 0

makes creating XML/JSON responses in Rails 3 easy and fun

kimjoar/angularjs-workshop 0

AngularJS workshop. AngularJS introduction, slides and tasks.

kimjoar/ava 0

:rocket: Futuristic JavaScript test runner

issue commentfacebook/react

useMemo / useCallback cache busting opt out

We also use function returned from useCallback as dependency to useEffect for data fetching. Memoized function often comes from another custom hook. Cache busting will cause state to be overwriten.

alexreardon

comment created time in an hour

created repositorycpojer/best-test-framework

The best test framework.

created time in 5 hours

issue commentfacebook/react

Bug: Effects are run on parents of suspending components

Yeah, this is exactly the kind of thing that Concurrent Mode solves. We can't solve it outside of that because it would violate the constraints that non-CM-compatible code assumes.

chriserickson

comment created time in 7 hours

created repositoryjarib/fhi-nextstrain-downloader

created time in 9 hours

release sindresorhus/System-Color-Picker

v1.3.0

released time in 9 hours

issue commentfacebook/react

DevTools: Standalone should support multiple connected clients

Yeah my comment was mostly wondering how to represent the id meaningfully to the user? If he has connections a34b, 4fs5 and c34d available in the devtools, (or even "facebook - 1", "facebook - 2", "facebook - 3") how to tell which one belongs to which running app/device? If we'd communicate the id as known on the app back through the Flipper SDK to Flipper, we'd solve it in the Flipper case, but still not in the general standalone case I guess.

bvaughn

comment created time in 11 hours

issue commentfacebook/react

script onLoad is not triggered

Tried everything and nothing works for me either.

					<script async src="https://cdn.volument.com/v1/volument.js" onLoad="volument('xxxc78c')"></script>

Send help! 😇

caub

comment created time in 12 hours

issue commentfacebook/react

Bug: ReactDOM ignores the fontFamily values that end with spaces followed by numbers (e.g. "Exo 2")

@eps1lon maybe we should add just info message for dev mode for this case? I thing it should be nothing more than reminded for developer.

niwinz

comment created time in 15 hours

issue closedfacebook/react

Bug: Effects are run on parents of suspending components

With a component hierarchy like:

<Suspense>
  <Parent>
    <Child /> {/*<-- this one suspends */}
  </Parent>
</Suspense>

If the child throws to suspense, neither the parent nor child are in the DOM. However, the parents effects are still run. This breaks classes of layout effects, e.g. measuring text etc.

React version: 17.0.2

Steps To Reproduce

  1. Open code sandbox
  2. Look at console

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

Link to code example: https://codesandbox.io/s/parent-effects-suspense-m2k4q?file=/src/App.tsx (see the console)

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

The current behavior

Effects are run on parent component even though it isn't in the DOM

The expected behavior

Effects are not run on the parent component until it is actually mounted

closed time in 16 hours

chriserickson

issue commentfacebook/react

Bug: Effects are run on parents of suspending components

Thanks for the report.

This is similar to https://github.com/facebook/react/issues/14536 and https://github.com/facebook/react/issues/18141

Unfortunately, it is not possible to fix with ReactDOM.render:

My understanding is that this is not possible to fix in the legacy (ReactDOM.render) mode. Sorry. It's a quirk of the legacy mode which we can't fix without introducing other breaking changes. This is solved in Blocking Mode and Concurrent Mode, but they are only available in experimental releases for now.

-- https://github.com/facebook/react/issues/18141

Note that "Blocking Mode" is no longer availabe in the latest experimental releases.

chriserickson

comment created time in 16 hours

issue commentfacebook/react

Bug: ReactDOM ignores the fontFamily values that end with spaces followed by numbers (e.g. "Exo 2")

(because if you put const style = {fontFamily: "Exo Other"}; it works as expected)

The question is what "expected behavior" is in this context. Because it works if you have platform expectations. Exo Other working without quotes but Exo 2 requiring quotes is specified behaivor as shown by @AlexRAV.

React could not just add quotes but also need to check that quotes aren't already in place. And then it isn't even clear if people actually appreciate this fix or find it more confusing. After all, why doesn't the platform patch Exo 2 to "Exo 2" if that would always be the desired behavior?

niwinz

comment created time in 17 hours

release sindresorhus/active-win

v7.2.0

released time in 17 hours

issue commentfacebook/react

DevTools: Standalone should support multiple connected clients

I think the way we would do this would be...to establish a unique id per client connection on the server, then send that id back and forth when communicating (kind of like the "renderer id" works already). Then when a connection closes for a given id, we'd need to clear out its store entries.

bvaughn

comment created time in a day

issue commentfacebook/react

[Umbrella] Releasing Suspense

We are getting closer to the first release that would have an actual number version on it. It will be tagged as an alpha. Like always, we’ll announce it on the blog. A stable release is going to take place at least several months after that since we’re going to work closely with the ecosystem and it will take some more time to fill in the gaps. Sorry this is brief, preparing the communication for this is another part of the ongoing work.

acdlite

comment created time in a day

issue commentfacebook/react

[Umbrella] Releasing Suspense

@gaearon That's awesome! Does that mean a stable release with these things is coming soon? Will this be React 17.1?

acdlite

comment created time in a day

issue commentfacebook/react

[Umbrella] Releasing Suspense

Finalize other API semantics and defaults. (not started)

That’s one of the remaining areas to polish.

This is in progress. We've tweaked and unprefixed some APIs (for the experimental channel only). https://github.com/facebook/react/pull/21488

acdlite

comment created time in a day

issue commentfacebook/react

Hooks + multiple instances of React

If anybody is using npm link on a Webpack UMD module, this post might be helpful.

I have a CRA app (myapp) that references a custom React component library (mylib). The React component library was built from the ground up and uses Webpack to create a UMD module. Mylib was then npm link'd from myapp for development purposes. I had a functional component that was working until I added a call to useState(). After reviewing the package.json of mylib and myapp, I knew that I was running into an issue with duplicate React copies.

These are the following steps I used to diagnose and fix the issue. Some of them might be extraneous, but I'm leaving them in here for completeness sake.

Diagnosis

  1. I used the suggested diagnostic for duplicate React copies from https://reactjs.org/warnings/invalid-hook-call-warning.html:
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
  1. I then npm linked myapp's react and react-dom directories from mylib. The React docs say just to link react, but this will cause the browser console to still log false (Fail)
  2. This is where the React docs stop. Unfortunately, I was still receiving this admittedly infuriating error message. I then found a helpful article written by Rob Kendal (https://robkendal.co.uk/blog/2019-12-22-solving-react-hooks-invalid-hook-call-warning).
  3. I made sure my Webpack config had react & react-dom as peerDependencies per Rob's article. Still got an error.
  4. Per Rob's article, I also had to set the externals section of my Webpack config file. Rob's suggestion was this
externals: {
   react: 'commonjs react',
  'react-dom': 'commonjs react-dom',
}
  1. Ok, no more hook error, but now I'm getting a webpack error. After some searching, I tried this:
    externals: {
        'react': {
			commonjs: 'react'
		},
        'react-dom': {
			commonjs: 'react-dom'
		}
    }
  1. Well, that didn't work either, but the error messages give me hope. Running npm run start from myapp results in an unhelpful error message, but I then try npm run start from mylib. For the record, mylib's start command is defined as webpack --mode=development --watch. I then get an error in the CLI mentioning a lack of a "commonjs2" definition. After some searching and reading the Webpack docs, I tried:
    externals: {
        'react': {
			commonjs: 'react',
			commonjs2: 'react'
		},
        'react-dom': {
			commonjs: 'react-dom',
			commonjs2: 'react-dom'
		}
    }

Finally, my component library compiled and my app didn't complain about hooks anymore!

tl;dr

If you are npm linking a Webpack/React module (yourlib) from another React app (yourapp), then you need to:

  • Go to yourlib and npm link yourapp's copy of React & ReactDOM
  • Modify yourlib's package.json to exclude React from the output bundle by specifying it as a peerDependency and setting the externals section

It was a little frustrating that this scenario was covered (incompletely) by this little blurb:

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

Grabbing my React component library from npm would have solved this issue, but I'm not going to publish my company's proprietary code to the public (not that it's my call anyways). Furthermore, while I could have also used a private npm repo like Verdaccio, I think the ability to use npm link and develop my library as the same time as my app is a huge boon for development.

I don't think my scenario is an edge case at all, and the React docs need to be updated to have more accurate wording. To say "one possible fix is to run npm link ../myapp/node_modules/react from mylib" is inaccurate because in most cases mylib is going to be bundled via some bundler like Webpack which means additional steps are required to produce a fix. At the very least another sentence should be appended to that paragraph which says, "Furthermore, if you are using a bundler you should consult your bundler's documentation to ensure React is being excluded from the output."

brunolemos

comment created time in a day

Pull request review commentfacebook/react

fix: eslint-plugin-react-hooks - report hooks used within underscored non-component functions

 const tests = {         const [myState, setMyState] = useState(null);       }     `,+    `+      function _Component() {

I'm not sure why it allows it exactly: https://github.com/facebook/react/blob/1a2d7925035531e5767ff31ff8d0d581b5f94d49/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L42-L46

ddbfe2ed50c7a3476ceff20f5924011ac1ad6428 was the commit but I can't find any context as to why it's allowed.

My assumption was that some people might name internal components like that?

function _InternalComponent() { ... }

export default function Component() {
  return <_InternalComponent />
}

Though it seems like a pretty weird naming convention.

Sure thing - I will remove it!

bradzacher

comment created time in a day

Pull request review commentfacebook/react

fix: eslint-plugin-react-hooks - report hooks used within underscored non-component functions

 const tests = {         const [myState, setMyState] = useState(null);       }     `,+    `+      function _Component() {

Should we ban this too? I honestly don't know why anyone would use a name like this.

bradzacher

comment created time in a day

pull request commentfacebook/react

fix: eslint-plugin-react-hooks - report hooks used within underscored non-component functions

<!-- 0 failure: 0 warning:

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

Comparing: 1a2d7925035531e5767ff31ff8d0d581b5f94d49...dc7914bf0fbcd5f627de8c888f13e9794720f4fe

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 126.00 kB 126.00 kB = 40.41 kB 40.41 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 128.82 kB 128.82 kB = 41.35 kB 41.35 kB
facebook-www/ReactDOM-prod.classic.js = 406.09 kB 406.09 kB = 75.11 kB 75.11 kB
facebook-www/ReactDOM-prod.modern.js = 394.46 kB 394.46 kB = 73.29 kB 73.29 kB
facebook-www/ReactDOMForked-prod.classic.js = 406.09 kB 406.09 kB = 75.11 kB 75.11 kB

Significant size changes

Includes any change greater than 0.2%:

<details> <summary>Expand to show</summary>

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js +0.23% 87.42 kB 87.62 kB +0.31% 20.77 kB 20.83 kB
oss-stable/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js +0.23% 87.42 kB 87.62 kB +0.31% 20.77 kB 20.83 kB

</details>

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

bradzacher

comment created time in a day

PR opened facebook/react

fix: eslint-plugin-react-hooks - report hooks used within underscored non-component functions

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

The rule previously only considered a function as not a component function if it started with a lowercase character. However this is incorrect if you have a function name like _myfunction.

This PR adds two things:

  1. adds checks to report against underscored non component functions like _myfunction
  2. updates the logic to use toUpperCase so the rule supports non-latin characters.

Test Plan

  • yarn flow
  • yarn lint
  • yarn test eslint-plugin
  • yarn test --prod eslint-plugin
+79 -2

0 comment

2 changed files

pr created time in a day

issue commentfacebook/react

DevTools: Standalone should support multiple connected clients

Currently the unconfirmed but observed behavior is that a newer connection will replace the old connection and reset the state of the devtools, but they do keep working correctly as far as I could tell.

An MVP would probably have a dropdown to select one of the connections. Do the devtools backend know the identifier of the application? (I can imagine that is quite context dependent, thinking primarily about RN in this case).

For the Flipper specific use case we wouldn't really need the dropdown if we could specify which application we are currently interested in (since device / application selection is ideally made in our chrome). Obviously for standalone devtools that is different.

To add to the complexity a valid scenario is the same app being connected multiple times, while it is deployed to different devices (e.g. a iOS simulator, Android emulator and physical phone). So beyond the identifier the most optimal scenario would also provide the device serial. However, IIRC, (RN) apps do not know the serial of the device it runs on for security reasons. The Flipper SDK embedded in the app does know it as it is provided during certificate exchange, so in principle we could configure the DevTools backend and tell it the device serial + application name from the Flipper SDK, to make the loop work.

bvaughn

comment created time in a day

pull request commentfacebook/react

Fix/memoized state

@gaearon Can you help me here?

ktfth

comment created time in a day

issue commentfacebook/react

Bug: Effects are run on parents of suspending components

For context, we ran into this with Relay - a useFragment block suspended sometimes, causing a parent component's layout effects to make incorrect measurements. It is worked around with an intermediate suspense boundary, but that may not be desirable if you want the entire screen to wait to load until the sub-components are able to load.

chriserickson

comment created time in a day

issue openedfacebook/react

Bug: Effects are run on parents of suspending components

With a component hierarchy like:

<Suspense>
  <Parent>
    <Child /> {/*<-- this one suspends */}
  </Parent>
</Suspense>

If the child throws to suspense, neither the parent nor child are in the DOM. However, the parents effects are still run. This breaks a lot of layout effects, e.g. measuring text etc.

React version: 17.0.2

Steps To Reproduce

  1. Open code sandbox
  2. Look at console

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

Link to code example: https://codesandbox.io/s/parent-effects-suspense-m2k4q?file=/src/App.tsx (see the console)

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

The current behavior

Effects are run on parent component even though it isn't in the DOM

The expected behavior

Effects are not run on the parent component until it is actually mounted

created time in a day

pull request commentfacebook/react

chore: Add document is null check in invariant

Hey @zombieJ, thanks for the suggestion and I'm super sorry for the delay.

The real issue here is that this code is firing after jest has torn down the environment at all. To fix the core issue, we've created https://github.com/facebook/react/pull/20915, but that's a breaking change so we've been waiting until we're ready for the next release to land it.

zombieJ

comment created time in a day

issue closedfacebook/react

How to debug while learning the source code?

How to debug while learning the source code?

closed time in a day

maomy1992

issue commentfacebook/react

How to debug while learning the source code?

Support requests filed as GitHub issues often go unanswered. We want you to find the answer you're looking for, so we suggest the following alternatives:

Coding Questions

If you have a coding question related to React and React DOM, it might be better suited for Stack Overflow. It's a great place to browse through frequent questions about using React, as well as ask for help with specific questions.

https://stackoverflow.com/questions/tagged/react

Talk to other React developers

There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React.

https://reactjs.org/community/support.html

maomy1992

comment created time in a day

push eventfacebook/react

Brian Vaughn

commit sha 1a2d7925035531e5767ff31ff8d0d581b5f94d49

Tweaked DevTools error template title to match issue form template

view details

push time in a day