From 6671ba7b77142a73184caf863890d5ff20f2361b Mon Sep 17 00:00:00 2001 From: Oliver Joseph Ash Date: Wed, 7 Aug 2024 10:46:23 +0100 Subject: [PATCH 1/2] Document behaviour of setting state inside `useLayoutEffect` (#7096) Co-authored-by: Sebastian Silbermann --- src/content/reference/react/useLayoutEffect.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index 0d7b04841..d38458f14 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -67,6 +67,8 @@ function Tooltip() { * The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this makes your app slow. When possible, prefer [`useEffect`.](/reference/react/useEffect) +* If you trigger a state update inside `useLayoutEffect`, React will execute all remaining Effects immediately including `useEffect`. + --- ## Usage {/*usage*/} From 2bfa7a628b0534bb0d437ff7520a72010ab970c3 Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 8 Aug 2024 10:43:41 -0400 Subject: [PATCH 2/2] Update compiler docs installation instructions (#7095) --- src/content/learn/react-compiler.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index f34c382ed..2920e8643 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -121,7 +121,7 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro Prior to installing the compiler, you can first check to see if your codebase is compatible: -npx react-compiler-healthcheck@latest +npx react-compiler-healthcheck@experimental This script will: @@ -143,7 +143,7 @@ Found no usage of incompatible libraries. React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler. -npm install eslint-plugin-react-compiler +npm install eslint-plugin-react-compiler@experimental Then, add it to your eslint config: @@ -203,7 +203,7 @@ If you're starting a new project, you can enable the compiler on your entire cod ### Babel {/*usage-with-babel*/} -npm install babel-plugin-react-compiler +npm install babel-plugin-react-compiler@experimental The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler. @@ -258,7 +258,7 @@ Next.js has an experimental configuration to enable the React Compiler. It autom - Install `babel-plugin-react-compiler` -npm install next@canary babel-plugin-react-compiler +npm install next@canary babel-plugin-react-compiler@experimental Then configure the experimental option in `next.config.js`: