feat: implement pattern to replace React
default import method references with destuctured named imports
#235
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This pattern replaces React default import method references (e.g.
React.ReactNode
) with destructured named imports (import { ReactNode } from 'react'
).Running this will also make sure that
React
is imported.Background
This is mainly a pattern is used on my current code base, but I hope it can be useful to others.
Using the destructured named imports is the recommended way to use React imports.
When this pattern is used in combination with a linter/ formatter (e.g.
Biome
) you can easily optimize legacy React code bases.Caveat
This pattern always adds a new import when there is non-destructured import (if your coding style requires it) e.g.
Additionally, if you are using typed imports you may need to rely on your linter.