ArnaudBarre / eslint-plugin-react-refresh

Validate that your components can safely be updated with Fast Refresh
MIT License
216 stars 14 forks source link

Report React contexts #53

Closed IgorAufricht closed 1 month ago

IgorAufricht commented 1 month ago

As a convention, React contexts usually start with a capital letter, e.g. MyContext. This means the plugin considers them a component and not report them, which is not ideal, as they still break HMR.

Example:

export const hello = "world";  // reported correctly
export const Component = () => <div>My component</div>;
export const MyContext = createContext("hello");  // not reported
export const Component = () => <div>Component</div>;

It would be really good if the plugin could report these cases (probably with a new config option). I can think of two potential ways to detect React contexts:

Either one or a combination of both could be used.

Let me know what you think - if you agree this would be a good addition, I could also create a PR.

Thanks!

ArnaudBarre commented 1 month ago

That's a good point! I think Context is a bit too generic, so the naming convention will also trigger for people creating component like a context for a chat component that will be called ChatContext but actually be a UI sidebar or a header.

Handling the simple case for now export const MyContext = createContext("hello"); is not too hard to add so you can try to do a PR for it!