For example, TikTok has upgraded to React 18 already (twitter.com/Brooooook_lyn/status/1402632529270632456?s=20)

This looks like they're just testing integration, not pushing React 18 to production.

I personally don't see any issue with app devs trying the alpha already. From how I understood it, this isn't generally recommended because most apps use at least one library. So it might be frustrating if you want to try it out, but upstream isn't ready. So right now the goal is to work the problem bottom up so that library maintainers aren't flooded with issues regarding "React 18 compat when?". But that's just from my perspective.

Rather than listing libraries that aren't ready (putting negative pressure on those maintaienrs) we may want to start a list of the libraries that are compatible. Though right now is probably too early.

can reduce other one's time-wasting.

I think there's a mismatch of expectations here. Upgrading to React 18 right now is most likely not the most productive task. Upgrading and facing issues right now should be the expecation so considering it a "waste of time" isn't very constructive. The React working group is actively looking for such issues right now. Idenitfiying these issues is the exact opposite of "wasting time".

dfsf

gsd

test

fe

d

d

hey

hey

hey

We’re not yet asking application authors to try the release.

People won't listen (like me).

For example, TikTok has upgraded to React 18 already (https://twitter.com/Brooooook_lyn/status/1402632529270632456?s=20)

Since people want to try out fresh things immediately, I think a list of what is blocking people from upgrading is helpful and can reduce other one's time-wasting.

hey

test comment

test

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. -->

React version: 17.0.2

Steps To Reproduce

1. Render a button and a scrollable list with a height of 150px. The list should contain an array of 15 items, making sure to set the key prop of each item to unique values.
2. Observe that you can see around 8 of the original 15 list items in view.
3. On clicking the button, insert 15 more items into the beginning of the list, once again making sure to set the key prop of each item to unique values.
4. Observe that you can now see around 8 of the new list items in view.

<!-- 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/keen-sound-7q5yf?file=/src/App.js

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

If the scroll position is at the very top of a list, after inserting new items at the beginning of the list, the new items are now visible.

The expected behavior

If the scroll position is at the very top of a list, after inserting new items at the beginning of the list, the original items should remain visible.

NOTE: When the scroll position is 1 or more pixels from the top of a list, after inserting new items at the beginning of the list, the new items remain visible as expected.

Hi! Can you clarify what would be the purpose of an issue like this? We’re not yet asking application authors to try the release.

The Alpha is focused on the library maintainers, and there will be a several months period before the Beta. It’s expected things would need adjustment early on, and I’m worried making a list of popular libraries before the authors even got a chance to try the release might be a bit premature.

We are committed to working with library authors and helping find recommendations where they’re unclear, including on this issue tracker. I’m just not sure that making a public list is the right way to kick this off.

What do you think?

https://github.com/ReactTraining/react-router/issues/7870

I do not have permission to post https://github.com/reactwg/react-18/discussions. Please open and pin a new issue in that repo to list all widely-used library that does not work with React 18 or need special handling.

I think the documentation has not been updated. This feature has been removed because of performance issues. You could check the blog post here - https://reactjs.org/blog/2019/08/15/new-react-devtools.html, and related #17960

This issue seems to be solved by https://github.com/facebook/react/pull/18031

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

<!-- Dependabot npm and yarn fixtures dom handlebars 4.7.7 -->

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

<!-- it hadn't been solved-->

@mmnoo that's sort of what I was saying. Think of it is less as "rules", and think of it as "how is this going to potentially change behavior in my application?".

I can't give specifics, because I don't know your app and I don't know what side effects you're considering doing here.

If the "side effect" is logging to the console or writing to localStorage, then while it's technically "breaking the rules", it's meaningless in the grand scheme and won't cause bugs.

If it's, say, making an HTTP DELETE call at the wrong time... then that could be very bad for your app :)

So, try to think about behavior based on the stated way React is going to execute things, not "am I breaking the rules".

Bumps ws from 5.2.2 to 5.2.3. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/websockets/ws/releases">ws's releases</a>.</em></p> <blockquote> <h2>5.2.3</h2> <h1>Bug fixes</h1> <ul> <li>Backported 00c425ec to the 5.x release line (76d47c14).</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/websockets/ws/commit/6dd88e7e968ef2416445d8f8620c17d99b15c77c"><code>6dd88e7</code></a> [dist] 5.2.3</li> <li><a href="https://github.com/websockets/ws/commit/76d47c1479002022a3e4357b3c9f0e23a68d4cd2"><code>76d47c1</code></a> [security] Fix ReDoS vulnerability</li> <li>See full diff in <a href="https://github.com/websockets/ws/compare/5.2.2...5.2.3">compare view</a></li> </ul> </details> <br />

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>

@dependabot squash and merge

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

:heavy_check_mark: Deploy Preview for reactjs ready!

:hammer: Explore the source changes: cd16d40b51882c3290e8c034ebf50369540aefa1

:mag: Inspect the deploy log: https://app.netlify.com/sites/reactjs/deploys/60c66156fd3f0b0008c12065

:sunglasses: Browse the preview: https://deploy-preview-3735--reactjs.netlify.app