Named import and Default import in React

React, a popular JavaScript library for building user interfaces, allows developers to modularize their code by using modules and imports. When working with React, you often encounter two types of imports: default imports and named imports. In this article, we'll delve into the differences between them and provide examples, with a focus on React-specific scenarios.

Default Imports in React:

Default imports in React are used when a module exports a single value or functionality as its default export. This is common when dealing with components. Let's consider an example:

jsxCopy code
// Component: Button.js
import React from 'react';

const Button = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

In this example, the Button component is the default export of the Button.js module. Now, let's import this component in another file:

jsxCopy code
// File: App.js
import React from 'react';
import Button from './Button';

const App = () => {
  return (
    <div>
      <Button label="Click me" />
    </div>
  );
};

export default App;

Here, we use the import Button from './Button'; syntax to bring in the default export of the Button.js module. The name Button is not arbitrary; it is the name we assign to the imported component.

Named Imports in React:

Named imports in React are employed when a module exports multiple functionalities, and you want to selectively import specific ones. React Router DOM, a common library for handling navigation in React applications, provides a good example of named imports:

jsxCopy code
// Component: Navigation.js
import React from 'react';
import { Link, Route, Switch } from 'react-router-dom';

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

const Navigation = () => {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
};

export default Navigation;

In this example, Link, Route, and Switch are named exports from the 'react-router-dom' module. When importing these components, we use curly braces {} to specify the exact names:

jsxCopy code
// File: App.js
import React from 'react';
import Navigation from './Navigation';

const App = () => {
  return (
    <div>
      <Navigation />
    </div>
  );
};

export default App;

Here, we import the Navigation component, which internally uses named imports from 'react-router-dom'. The distinction lies in the use of curly braces and the exact names of the exports.

Key Differences:

1. Syntax:
2. • Default imports use the import identifier from 'module' syntax, where identifier is the name assigned to the default export.
   • Named imports use the import { name1, name2 } from 'module' syntax, specifying the exact names of the exports.
2. Usage:
3. • Default imports are suitable when a module exports a single primary functionality, such as a React component.
   • Named imports are beneficial when a module exports multiple functionalities, and you need to selectively import specific ones.
3. Renaming:
4. • Default imports allow you to choose any name for the imported entity, offering flexibility in naming.
   • Named imports require using the exact names of the exports, ensuring clarity but providing less flexibility in naming.
4. React Router DOM Example:
5. • Named imports are commonly used in React Router DOM, where components like Link, Route, and Switch are selectively imported for routing purposes.

When to Use Each:

• Use default imports when dealing with modules that export a single, primary functionality, such as a React component.
• Use named imports when a module provides multiple functionalities, and you need specific ones in your component or module.

Conclusion:

Understanding default and named imports in React is crucial for structuring and organizing your code efficiently. Whether you're dealing with individual components or leveraging external libraries like React Router DOM, choosing the appropriate import method enhances code readability and maintainability. By grasping the nuances between default and named imports, React developers can streamline their workflow and create modular, scalable applications.