How do I make React components more reusable?

Question

I've been learning React and have been working on a project the past month but I am beginning to realize my components aren't necessarily "reusable". I know reusability is an important concept of React but I can't figure out how to simplify my components down so they are.

For example I have a To-Do app using react-beautiful-dnd which contains three components: DragDropContext, Droppable, and Draggable. The overall app contains four components now: the main App component which passes data into the three react-beautiful-dnd components. So far this is incredibly simple and reusable.

Now, I want to add an info button for each task which when the user clicks, brings up the fifth component, Info. To do that I need to add logic to the Draggable component. Next I want to add a feature allowing me to add/delete tasks from the list. To do that, I need to modify either DragDropContext or Droppable components to prevent it from rendering the selected Draggable task.

At this point, what was once a reusable component is now specialized. This is an extremely simplified version of my project currently. I have the same To-Do list but 10+ components that need to all communicate with each other making none of them reusable outside this project without heavily modifying the code for each use. Is there some big concept that I am missing or is this how it is?

Answer 1

its hard to tell exactly what is the issue without looking at specific design decisions, but the cornerstone of react philosophy is to make components reusable not only with in a specific project that one team own, but even across different teams that work on different projects.

React achieves this, through its declarative programming style, what that basically means - in the scope of react components - that way a component behaves is only based on the props that is passed to it. This is why react always encourages you to stay away from accessing the dom inside your components.

That being said, react gives you the syntax through framework of doing that declarative programming, you still have to make sure that you use that syntax as intended while aligning with react philosophy - what i mean by this is that you can still have correct syntax but without yet aligning with react philosophy.

There are many things that need to be done to make a certain component reusable, from the name of the component it self to the name of the props, and many other things that are beyond the scope of one stack overflow answer. But one important thing to keep in mind in order to make reusable components, is that reusable components are dump, they are not coupled with the outside world at all, even your app that is the first consumer and maybe the only consumer of them. In other words, you have to create two types of components, smart and dump, smart components should handle things that are related to business logic, data fetching, etc... while dump components, are just ui components, that their behaviour can easily be expected by the props based to them.