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 = () => (
  <>
    <h1>Products</h1>
    <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 (
    <Router>
      <Route path="/products" component={Products} />
      <Route default component={Dashboard} /> 
    </Router>
  );
};