DEV Community

Discussion on: ReactJS: Component everything or not?

Collapse
 
stereoplegic profile image
Mike Bybee • Edited

Your state management is going to be a big factor, but it doesn't have to be complicated. In fact, you can make your life much simpler by developing the right habits. I'm not even referring to global state libraries like Redux.

KISS is important, but a single file with hundreds of lines of code you didn't split up, because you didn't see a clear case for code reuse, is hardly keeping it simple.

Something to consider when you start feeling trepidation about breaking up into components, as I'm sure most of us felt when we got started with React and went through the annoyance of prop drilling (and we all probably at some point avoided splitting components as much as we should have as a result):

Context is your friend. Learn it. Use it often, wrapping with a context provider every level where it makes sense to share local state between components therein, without reaching higher for global state (forms are a perfect example).

You may even find that this eliminates your need for Redux and the like for global state (though don't follow the "everything consuming a top level context" pattern like so many "WE DON'T NEED REDUX ANYMORE!!!" tutorials have taught, as that's going to cause unnecessary rerenders and eventually affect performance). Having them at multiple levels really isn't that hard to track/manage in most cases, especially if you're documenting your code properly. Save top level context for things which are unlikely to change often or at all.

Since context is a part of React itself, basing your state management on it even allows you to be ready for Concurrent Mode right now (and obviously reduces your bundle size).