CODEWITHSUNDEEP
reactjsredux
Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24590

What are the disadvantages of using one big React component?

What are the disadvantages of using one big React component?

I have a deep experience using webpack, browserify, AngularJS, ES6, NPM and other similar web framework. I am new to React.

I want to create a single page app in React. I don't want or need testing. I don't need team friends to work on. I only need to make the product development as fast as possible. Make thing works. You can call it MVP. You can call it type lessm, or smart developement. If things work good in the future I can consider refactoring the project. I am the only developer who works on. I don't worry about perfromance issue (if it is just few ms)

The question is: All the articles said to make as much as possible many and small React components. In separate files. You can see the React-Starter-Kit. It is huge.

You can see that every component is a separate file.There is huge webpack.config.js file. Every component import many other things. If I also want Redux, I need to import the store, and make connect on every component. I want to take different approach. I want to use React & Redux. But using only one component. Every inner element can Dispatch or execute events.

Is there is any problems in the future that I don't think about?

HTML:

<html><head><body></body></html>

JavaScript:

App=React.createClass(function(){
    getInitialState:function(){
        return {
            openMore:'block'
        }
    },
    openMore:function(){
        this.setState({openMore:'visible'})
    },
    render:function(){
        return (
            <div>
                I want to put all the HTML of the app
                <span>
                    In one component that do everything.
                    <button onClick={this.openMore}>More Info</button>
                    <span> This way I beleive I will need to type less for development</span>
                    <b style={{display:this.getState().openMore}}>What are the disadvance of this?</b>
                </span>
            </div>
        )
    }
})
ReactDOM.render(App,document.getElementsByTagName('body')[0])

Upvotes: 6

Views: 5235

Answers (3)

Max White
Max White

Reputation: 111

Having a single large file is fine. React was built on the maxims "No abstraction is better than the wrong abstraction" and having an API with a low surface area.

If you're not sure what problems your application is solving, then wait until you feel the pain of not having an abstractions before you create one.

If your application is likely to be in flux as its feature set isn't nailed down, then don't give yourself busy work by moving things around in different files.

If you don't have a website that is designed with reusable components that are intuitively separable, than don't separate it out into different components.

It is fine to use React just as a means of having a declarative syntax for what your html should look like in different states.

Upvotes: 11

Harkirat Saluja
Harkirat Saluja

Reputation: 8114

Well disadvantages are many. I will try listing them from what I have faced and observed:-

  1. React was built on the concept to break page into components, so yeah the more you break the page into small components the more it is easier to use.
  2. Its generally easy to track the code.
  3. Its scalable
  4. One component does not break other components.
  5. Re-rendering is there only for specified components if they are isolated. If you have everything in a single component, the rendering would make your entire component load again, reducing efficiency.
  6. Harder to test
  7. Difficult to use with redux while passing actions and then connecting to store.
  8. Your component should do only one job.
  9. Cannot break the components into presentational and container components thus not utilising redux to full potential.
  10. Not being able to use code spilt feature of webpack which increase speed of page due to partial code loading.

These are few things I personally faced. Next,coming to webpack configuration. I hardly have configured webpack file more than 100 lines and trust me those 100 lines make your life really easier. In fact basic configuration is just 10-15 lines which can generate your bundle.

Now,coming to problems in future, yes following would be problems:-

  1. Difficult to scale up.
  2. Difficult to test
  3. Not utilising libraries to their potential
  4. Difficult to manage component due to monolith behavior.

Hope it helps!!!

Upvotes: 13

Even Stensberg
Even Stensberg

Reputation: 508

Having large components is bad due that you cannot simplify your code. Splitting your modules into smaller ones, will make it easier for you to maintain the code at a longer term, as well as finding out an error faster. Stack Trace is easier as well as it is more composeable, when having an implicit component.

FWIW, you can do a lot more separating your component into smaller ones, such as filtered props and an own state. The bad thing though, is that you can loose track of how the application is built up when you are looking at the build others have made.

Upvotes: 3

Related Questions