Named vs default exports in React projects

When working in React SPAs, I tend to use named exports for the most part, e.g.

export const ProductList = () => {
  return <>A product list component</>;

And then, in another file…

import { ProductList } from "components/ProductList";

Part of this is is personal preference. It’s also down to my tooling: Flow’s autoimports feature seems to work best with named exports.

I usually only use default exports when creating screens or pages. This comes down to code splitting: I often lazy-load a screen when the user first navigates to it, and React.lazy presently only works with default exports. e.g.

const Products = () => (
    <ProductList />

export default Products;

And then in another file…

const Products = React.lazy(() => import("./screens/Products");
const Dashboard = React.lazy(() => import("./screens/Dashboard");

const Home = () => {
  return (
      <Route path="/products" component={Products} />
      <Route default component={Dashboard} />