React · Senior · Question 58 of 75

Why can importing one icon from a big "barrel" file (`index.ts` re-exporting everything) hurt?

✓Correct answer: Tools may have to load and parse every re-exported module, slowing dev builds and sometimes bloating bundles
2Barrel files are not valid TypeScript
3It breaks React hooks

Explanation

Side effects in any re-exported module prevent tree shaking. Import from specific paths or use tooling like Next.js optimizePackageImports.

Further reading

Test yourself

Take the React · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.