reactjs / reactjs/react.dev

[Suggestion]: More concrete advice for writing Fast Refresh-compatible code

オープン
#7,407 コメント 3 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

type: documentation
主要言語
JavaScript
スター
11.8k
フォーク
7.9k
平均マージ
1日 11時間
マージ済み PR(30日)
11

説明

Summary

I'm seeking advice on writing code that is compatible with React Fast Refresh and drawing a bit of a blank. I found: https://reactnative.dev/docs/fast-refresh (NB reactnative.dev not react.dev) which has some tips but the information is not very formal.

Should the react docs contain clear information about how to structure your code for best compatibility with Fast Refresh?

Page

No response

Details

From what I've gathered, it's recommended that any file exporting a React component should not export anything else (e.g., utility functions, data) to ensure Fast Refresh functions properly, and I found eslint-plugin-react-refresh which exists to help enforce this rule.

I was surprised not to be able to find authoritative guidance on this in the official react docs.

  • Is the advice I've seen in forums etc. correct, i.e. to export only 1 react component per file?
  • Do the rules in eslint-plugin-react-refresh accurately reflect best practice as it stands in 2025?
  • Should the react docs be more clear on what exactly is best practice in this respect?

(For background, I had to fix a number of issues when migrating our codebase (a few 10,000s loc) from preact to react and during this came across the plugin https://github.com/ArnaudBarre/eslint-plugin-react-refresh which I then enabled, which throws up many errors in our codebase (react/vite). I asked two experienced react developers if they comply with the rules as suggested by eslint-plugin-react-refresh and they seemed perplexed, suggesting that people don't structure things this way in real codebases — admittedly this is the most informal possible polling, but I couldn't point them to any particularly authoritative info to the contrary.)

As always, apologies if I have simply missed the relevant info in the docs.

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リンクされている React Native Fast Refresh のガイダンスと eslint-plugin-react-refresh を確認し、React ドキュメントがどのような権威ある推奨事項を示すべきかを判断する。推奨されるコード構成のガイダンスについて合意し、必要なドキュメントの内容またはページ変更を定義できれば完了とする。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react
領域
documentation
issue の種類
ドキュメント
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。