Let’s say I have a three components: <Genre /><Book /><DeleteModal />

A genre has multiple books, and I use .map to iterate through each <Book />

Each book can be deleted, when the Modal is displayed.

There are two options I can think of that would handle this.

• Importing the DeleteModal once, and feeding each with a prop
  that handles the closing/opening of the Modal.

• OR importing the DeleteModal in the Book component.

Am I best importing DeleteModal into each <Book /> component? Or could this affect the performance of the app, as it would be importing that component multiple times?

This is my first ‘real’ personal app I’m creating and I want to try adopt best practices.