Skip to content

Remove import React from snippets for React 17+ / 18 #8

Description

@nianod

In React 17 and later, the new JSX transform no longer requires import React from 'react' at the top of files that only use JSX. However, several snippets in this extension (for example rafce, rafcp) still generate components with this import line by default, which is now redundant in most modern setups.[1]

This leads to:

  • Extra unused imports in projects using the new JSX transform (Create React App ≥ v4, Vite, Next.js, etc.).[2][1]
  • Additional lint warnings when rules like no-unused-vars or no-unused-imports are enabled.

Proposed change:

  • Update React component snippets (rafce, rafcp, and similar) to no longer include:

    import React from 'react'

    by default when generating a new component.

  • Optionally (if you prefer not to break existing workflows), introduce a configuration setting such as es7-react-snippets.includeReactImport:

    • true (default for backward compatibility) – keep current behavior.
    • false – omit import React from 'react' from generated snippets.

Benefits:

  • Aligns snippets with the official React 17+ JSX transform guidelines.[1]
  • Reduces unused imports and related lint errors in new projects.
  • Makes generated boilerplate match what modern tutorials and templates show.[2]

If you agree with this direction, happy to open a PR updating the relevant snippet definitions.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions