Skip to content
3 changes: 2 additions & 1 deletion next-env.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
22 changes: 22 additions & 0 deletions src/components/MDX/Sandpack/ClearButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/

import * as React from 'react';
import {IconClose} from '../../Icon/IconClose';
export interface ClearButtonProps {
onClear: () => void;
}

export function ClearButton({onClear}: ClearButtonProps) {
return (
<button
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
onClick={onClear}
title="Clear all edits and reload sandbox"
type="button">
<IconClose className="inline mx-1 relative" />
<span className="hidden md:block">Clear</span>
</button>
);
}
16 changes: 9 additions & 7 deletions src/components/MDX/Sandpack/NavigationBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ import {
useSandpackNavigation,
} from '@codesandbox/sandpack-react/unstyled';
import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
import {ResetButton} from './ResetButton';
import {ReloadButton} from './ReloadButton';
import {ClearButton} from './ClearButton';
import {DownloadButton} from './DownloadButton';
import {IconChevron} from '../../Icon/IconChevron';
import {Listbox} from '@headlessui/react';
Expand Down Expand Up @@ -95,21 +96,21 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
// Note: in a real useEvent, onContainerResize would be omitted.
}, [isMultiFile, onContainerResize]);

const handleReset = () => {
const handleClear = () => {
/**
* resetAllFiles must come first, otherwise
* the previous content will appear for a second
* when the iframe loads.
*
* Plus, it should only prompt if there's any file changes
*/
if (
sandpack.editorState === 'dirty' &&
confirm('Reset all your edits too?')
) {
if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) {
sandpack.resetAllFiles();
}
refresh();
};

const handleReload = () => {
refresh();
};

Expand Down Expand Up @@ -188,7 +189,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
className="px-3 flex items-center justify-end text-start"
translate="yes">
<DownloadButton providedFiles={providedFiles} />
<ResetButton onReset={handleReset} />
<ReloadButton onReload={handleReload} />
<ClearButton onClear={handleClear} />
<OpenInCodeSandboxButton />
{activeFile.endsWith('.tsx') && (
<OpenInTypeScriptPlaygroundButton
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@

import * as React from 'react';
import {IconRestart} from '../../Icon/IconRestart';
export interface ResetButtonProps {
onReset: () => void;
export interface ReloadButtonProps {
onReload: () => void;
}

export function ResetButton({onReset}: ResetButtonProps) {
export function ReloadButton({onReload}: ReloadButtonProps) {
return (
<button
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
onClick={onReset}
title="Reset Sandbox"
onClick={onReload}
title="Keep your edits and reload sandbox"
type="button">
<IconRestart className="inline mx-1 relative" /> Reset
<IconRestart className="inline mx-1 relative" />
<span className="hidden md:block">Reload</span>
</button>
);
}
8 changes: 4 additions & 4 deletions src/content/blog/2025/04/21/react-compiler-rc.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,23 +57,23 @@ During the RC period, we encourage all React users to try the compiler and provi
As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18).

## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@6.0.0-rc.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!

To install:

npm
<TerminalBlock>
{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
{`npm install --save-dev eslint-plugin-react-hooks@rc`}
</TerminalBlock>

pnpm
<TerminalBlock>
{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
{`pnpm add --save-dev eslint-plugin-react-hooks@rc`}
</TerminalBlock>

yarn
<TerminalBlock>
{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`}
{`yarn add --dev eslint-plugin-react-hooks@rc`}
</TerminalBlock>

```js
Expand Down
74 changes: 43 additions & 31 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

## Upcoming Conferences {/*upcoming-conferences*/}

### CityJS London 2025 {/*cityjs-london*/}
April 23 - 25, 2025. In-person in London, UK

[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)

### App.js Conf 2025 {/*appjs-conf-2025*/}
May 28 - 30, 2025. In-person in Kraków, Poland + remote

[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)

### CityJS Athens 2025 {/*cityjs-athens*/}
May 27 - 31, 2025. In-person in Athens, Greece

[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)

### React Norway 2025 {/*react-norway-2025*/}
June 13, 2025. In-person in Oslo, Norway + remote (virtual event)

[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)

### React Summit 2025 {/*react-summit-2025*/}
June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)

[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)

### React Nexus 2025 {/*react-nexus-2025*/}
July 03 - 05, 2025. In-person in Bangalore, India

[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)

### React Universe Conf 2025 {/*react-universe-conf-2025*/}
September 2-4, 2025. Wrocław, Poland.

Expand All @@ -60,6 +30,12 @@ October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15

[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)


### CityJS New Delhi 2025 {/*cityjs-newdelhi*/}
November 6-7, 2025. In-person in New Delhi, India

[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)

### React Summit US 2025 {/*react-summit-us-2025*/}
November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event)

Expand All @@ -70,13 +46,49 @@ November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)

[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)

### React Paris 2026 {/*react-paris-2026*/}
March 26 - 27, 2026. In-person in Paris, France (hybrid event)

[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)


## Past Conferences {/*past-conferences*/}


### React Nexus 2025 {/*react-nexus-2025*/}
July 03 - 05, 2025. In-person in Bangalore, India

[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)

### React Summit 2025 {/*react-summit-2025*/}
June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)

[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)

### React Norway 2025 {/*react-norway-2025*/}
June 13, 2025. In-person in Oslo, Norway + remote (virtual event)

[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)

### CityJS Athens 2025 {/*cityjs-athens*/}
May 27 - 31, 2025. In-person in Athens, Greece

[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)

### App.js Conf 2025 {/*appjs-conf-2025*/}
May 28 - 30, 2025. In-person in Kraków, Poland + remote

[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)

### CityJS London 2025 {/*cityjs-london*/}
April 23 - 25, 2025. In-person in London, UK

[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)

### React Paris 2025 {/*react-paris-2025*/}
March 20 - 21, 2025. In-person in Paris, France (hybrid event)

[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj)

### React Native Connection 2025 {/*react-native-connection-2025*/}
April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France.
Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/react-compiler/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@ Instale o plugin ESLint:
npm install -D eslint-plugin-react-hooks@rc
</TerminalBlock>

<<<<<<< HEAD
Em seguida, habilite a regra do compilador na sua configuração ESLint:

```js {3}
Expand All @@ -185,6 +186,9 @@ module.exports = {
},
};
```
=======
If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rule is enabled by default in the latest RC, so no additional configuration is needed.
>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf

A regra ESLint irá:
- Identificar violações das [Regras do React](/reference/rules)
Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/react-compiler/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,11 @@ Usuários do Next.js podem habilitar o React Compiler invocado pelo swc usando [

## O que devo fazer sobre useMemo, useCallback e React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}

<<<<<<< HEAD
Se você está usando o React Compiler, [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback) e [`React.memo`](/reference/react/memo) podem ser removidos. O React Compiler adiciona memoização automática de forma mais precisa e granular do que é possível com esses hooks. Se você escolher manter a memoização manual, o React Compiler irá analisá-la e determinar se sua memoização manual corresponde à sua memoização automaticamente inferida. Se não houver correspondência, o compilador escolherá não otimizar esse componente.
=======
React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component.
>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf

Isso é feito por precaução, pois um anti-padrão comum com memoização manual é usá-la para correção. Isso significa que sua aplicação depende de valores específicos sendo memoizados para funcionar adequadamente. Por exemplo, para prevenir um loop infinito, você pode ter memoizado alguns valores para impedir que uma chamada `useEffect` seja disparada. Isso quebra as Regras do React, mas como pode ser potencialmente perigoso para o compilador remover automaticamente a memoização manual, o compilador simplesmente não otimizará. Você deve remover manualmente sua memoização escrita à mão e verificar que sua aplicação ainda funciona como esperado.

Expand Down
Loading
Loading