ReactJS difference between stateful and stateless

by

Yes, that is sort of the difference. Except with the stateful component you can also change the state, using this.setState for example:

var React = require('react');

var Header = React.createClass({

    getInitialState: function() {
        return {
            imageSource: "mypicture.png"
        };
    },

    changeImage: function() {

        this.setState({imageSource: "differentpicture.png"});
    },

    render: function() {
        return(
            <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} />
        );
    }
});

module.exports = Header;

So, in the example above, the changeImage manages the state of the component (which would also cause all child/dependent components to be re-rendered).

Somewhere in the application, you need to bind data, or remember things. Stateless components are dumb (and that is good), they cannot remember and they cannot give context to other parts of the UI. Stateful components provide the necessary context glue.

On the other hand, stateless components just get passed context (usually through this.props:

var React = require('react');

var Header = React.createClass({
    render: function() {
        return(
            <img src={this.props.imageSource} />
        );
    }
});

ReactDOM.render(<Header imageSource="myImage.png"/>, document.body);

In the example above, you can see that during the render, imageSource is passed in as an attribute and is then added to the stateless components this.props object.

More Related Contents:

  1. React showing 0 instead of nothing with short-circuit (&&) conditional component
  2. React functions inside render()
  3. When to use React setState callback
  4. How to push to History in React Router v4?
  5. How to display svg icons(.svg files) in UI using React Component?
  6. How can I persist redux state tree on refresh?
  7. How to use callback with useState hook in react [duplicate]
  8. Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
  9. ReactJS: Why is passing the component initial state a prop an anti-pattern?
  10. How to use throttle or debounce with React Hook?
  11. Why, exactly, do we need React.forwardRef?
  12. You should not use outside a
  13. Axios having CORS issue
  14. react router v4 default page(not found page)
  15. Next.js – Error: only absolute urls are supported
  16. Installing create-react-app gives npm ERR! shasum check failed and npm ERR! Unexpected end of JSON input while parsing near ‘…mojOzGIEI2rg0m24Yb5Oq’
  17. react.js custom events for communicating with parent nodes
  18. IMAGE: You may need an appropriate loader to handle this file type
  19. Nested Routes not rendering with React Router v4
  20. How to use comments in React
  21. Visual studio code changes format (React-JSX)
  22. Error while creating new React app (“You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)”)
  23. Re-initializing class on redirect
  24. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  25. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  26. React: Why component’s constructor is called only once?
  27. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  28. Relative path in index.html after build
  29. React stateless component this.refs..value?
  30. How to add custom Material UI palette colors

Leave a Comment