[Suggestion]: More concrete advice for writing Fast Refresh-compatible code
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 11.8k
- Fork
- 7.9k
- Merge medio
- 1g 11h
- PR unite (30g)
- 11
Descrizione
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.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Esamina le linee guida collegate di React Native Fast Refresh e eslint-plugin-react-refresh, quindi determina quali indicazioni autorevoli dovrebbe fornire la documentazione di React. Il lavoro è completato quando si raggiunge un accordo sulle indicazioni consigliate per la struttura del codice e vengono definiti i contenuti della documentazione o le modifiche alle pagine necessarie.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- documentation
- Tipo di issue
- Documentazione
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 25/100