Why are we talking about a below-average movie Ishq Vishk with the context of reusable component principles? Although the movie was not worth our time, the director played master stroke without us noticing it.
There is a character named ‘Dimpy’, in the entire movie Dimpy has only one line to speak ‘Kya baat hai yaaro’. And he uses the same line in more than a dozen scenes. Different situations, different emotions but same words. Crazy.
Don’t believe me, see this thread.
This is precisely what an excellent reusable component should do. But the question is how do we get there? Keeping this in mind I’ve jotted some base principles, using which a component can become more generic and scalable.
Get It Working
When you start creating your components, don’t think about reusability initially, the first step is to just build the component and get it working. Once that is done, only then think about making it reusable.
Behavioral Props
Dimpy changed the tone of dialog in every scene. Tone is the prop here. Try to list down all the variables which can be responsible for your component behaviors and make all of them props.
Example Component - Buttons
State Management
Avoid defining local states in reusable components, this way the component stays pure component(less rerendering) also you will have more control over the component.
And don’t pass setState’s, instead pass functions that handle the state.
Example
Single Purpose
There was one scene, where Dimpy was about to say something else, but instead, he stays silent. Here it is.
Similarly, each reusable component should serve only one purpose and not multiple purposes. Yes, we can combine multiple reusable components together but at the core, each of them should serve only one purpose.
Styling Wrapper
Reusable components should expose a prop using which styling could be applied to the container or wrapper.
Example
Data Injection
Design in such a way that you make all the API calls or data manipulations outside the reusable component and inject the resultant data as props to the reusable component.
Like what you read, then subscribe now and get the next movie (when released) to your nearest inbox.