DEV Community

Cover image for React Tips & Patterns

React Tips & Patterns

Michael Darko on March 24, 2021

React is pretty easy to learn if you know JavaScript, however, it's pretty easy to lose track of your project or just mess things up as it scales o...
Collapse
 
briang123 profile image
Brian Gaines

I feel like you could go further and refactor by passing an array of components that you'd want to render into a dashboard container. The container itself could use Flexbox or Grid to stylize the render and not carrying which component is coming in.

Given this, I would create template containers that are specific to its context vs. passing 4 different contexts to a dashboard and having the dashboard responsible for the UI. I feel it would be much more modular as a result.

Collapse
 
mychi_darko profile image
Michael Darko

If I get you right, you mean a different container for every segment, so you don't mix up different contexts, correct? I do that for really big components or when I need to fetch stuff separately or just make a reusable block of code for multiple pages. Otherwise, I just stick to something similar to what I did above.

Collapse
 
briang123 profile image
Brian Gaines

Cool....Yup. Separation of concerns and isolating functionality to its own container that you can just pass around and use wherever.

Collapse
 
prashanthwagle profile image
Prashanth P Wagle • Edited

Great Tips!.
IMO, Tip #1 can be improved futher by using custom hooks. If we have stateful logic that are to be shared, it is better to use a custom hook.

Collapse
 
zaklaughton profile image
Zak Laughton

Came here to say this! Dan Abramov added an update to a blog he wrote recommending this "container" style here, essentially saying that he thinks hooks are now a better solution.

Collapse
 
mychi_darko profile image
Michael Darko

Thanks for the info😊

Collapse
 
ravigithub profile image
Ravi Kasireddy

These are awesome!

Collapse
 
mrezah1 profile image
MrezaH

was great , thank you so much🙏😍

Collapse
 
mendoza profile image
David Mendoza (He/Him)

Loved the post man, just a simple add-on
if someone is using airbnb eslint spreading the props will launch a problem, hopefully someone reads this while looking it up haha

Collapse
 
mychi_darko profile image
Michael Darko

Oh wow, didn't know that. Is there a workaround?

Collapse
 
aalphaindia profile image
Pawan Pawar

These are awesome!