When should I use brackets with imports

I have two file, the first one is todoHelper.js

it has export const addTodo = (list, item) => [...list, item]

later on I want to use addTodo in another file, I simply do import {addTodo} from './todoHelpers'

But I'm also seeing people doing export default instead of just export. What's the differences?

Solution 1:

You can have only one export default per file and hence when you do export default like

export default AddTodo = (list, item) => [...list, item]

You can import it like

import MyAddTodo from './todoHelpers'

Since babel knows that you are trying to access the default component, you can access it in you file by any name

Now suppose you do

export const AddTodo = (list, item) => [...list, item]

You can have multiple such exports in you file like

export const AddTodo = (list, item) => [...list, item]  
export const DeleteTodo = (list, item) => [...list, item]

and when you import you will need to destructure them like

import {AddTodo, DeleteTodo} from './todoHelpers'

Now since you have multiple such exports thus babel wont know which component you are tyring to access if you access if by a different name like

import {MyAddTodo, MyDeleteTodo} from './todoHelpers'

If you want to do this you will have to import them as it is and them change thier name like

import {AddTodo as MyAddTodo, DeleteTodo as MyDeleteTodo} from './todoHelpers'

So as general practice you will default export the main component and the rest you can have as export normally or when you have only one component that you need to export from a file then you can choose whatever you want but a nice way will be to export it as default.