Can You Change State In Dumb Components, React

Stateful and Stateless Components in React

Stateful and Stateless Components

Today, we're going to review what stateful and stateless components are in React, how you tin tell the difference, and the complex process of deciding whether to make components stateful or not.

State Review

First, let's review what state is.

In a component, state is data we import — typically to bear witness the user — that is subject to change. It could change considering the database we're getting from may be updated, the user modified it — there are then many reasons that data changes!

            import React, {Component} from 'react'              course Pigeons extends Component {                                              constructor() {                                              super()                                              this.state = {                                              pigeons: []                                              }                                              }                                              render() {                                              return (                                              <div>                                              <p>Look at all the pigeons spotted today!</p>                                              <ul>                                              {this.country.pigeons.map(pigeonURL => {                                              render <li><img src={pigeonURL} /></li>                                              })}                                              </ul>                                              </div>                                              )                                              }              }

Typically we would likewise have a componentDidMount() that would take hold of our information from a database, but the above example should give you a basic idea: nosotros have state, and nosotros tin can return things from country.

Stateful and Stateless Components

Stateful and stateless components take many different names.

They are also known as:

– Container vs Presentational components

– Smart vs Dumb components

The literal deviation is that 1 has state, and the other doesn't. That means the stateful components are keeping runway of irresolute data, while stateless components print out what is given to them via props, or they e'er return the same matter.

Stateful/Container/Smart component:

                          form Main extends Component {                              constructor() {                              super()                              this.state = {                              books: []                              }                              }                              return() {                              return <BooksList books={this.state.books} />;                              }              }

Stateless/Presentational/Dumb component:

                          const BooksList = ({books}) => {                              render (                              <ul>                              {books.map(book => {                              return <li>book</li>                              })}                              </ul>                              )              }

Observe the stateless component is written as a part. As cool every bit state is, you should e'er aim to make your components as uncomplicated and stateless as possible, so different components tin can be reused similar Lego pieces, even if you don't have immediate plans to reuse a component. The stateful ones should experience lucky to be so!

When should I make a component stateful or stateless?

You probably won't know exactly how a component will turn out as soon as you start writing i — you volition figure it out as you become, following some guidelines. Here are some good ones:

Blazon out or visualize your website as if it were one component. Busy, right? Interruption information technology downwardly from there into smaller components.
Y'all'll need state somewhere when data dynamically changes, similar a user's current favorite songs or meridian scores. Aim to have a parent component continue all the data, and pass it down to its stateless children components.

                          grade Parent extends Component {                                              constructor() {                                              super()                                              this.state = {                                              books: [],                                              favoriteAuthors: []                                              }                                              }                                              render() {                                              return (                                              <div>                                              <Books books={this.state.books} />                                              <FavoriteAuthors favoriteAuthors={this.state.favoriteAuthors} />                                              </div>                                              )                              } }

Doesn't that look and feel and then neat? Having a parent component pass information downward to its children too assures that if there is whatever debugging needed regarding state management, we can go to the parent component to see what's upwardly, instead of checking country in each child component. All the children components have to worry nigh is receiving the information equally props properly (no pun intended).

So presentational components tin vary depending on what information it receives. The difference is that a stateful component keeps runway of the information itself, instead of only taking it via props and outputting it.

If information is completely static and you lot know it will never alter, we accept a very 'presentational' component indeed. This is similar a unicorn presentational component:

                          const Rules = () => {                                                            return (                                              <div>                                    <p>The rules are simple and unchanging:</p>                                              <ol>                                              <li>You lot don't talk about the rules.</li>                                              <li>Y'all must follow the first rule.</li>                                              </ol>                                              </div>                                              )              }

This stateless component doesn't fifty-fifty take props! It's always overnice when this happens, simply you lot should generally look to have child components ready to display input via props.

Examples of stateless components being reusable

You won't reuse every single stateless/presentational component, even though you should build in React so your components are every bit reusable as possible.

For example, mayhap your principal page has four sections, and y'all know you're not going to reuse any of its components.

                          class Master extends Component {                                              constructor() {                                              super()                                              this.state = {                                              currentUser: {},                                              gamesAll: [],                                              gamesMostPopular: []                                              }                                              }                                              render() {                                              render (                                              <div>                                              <p>Welcome, {this.land.currentUser}!</p>                                              <AllGames allGames={this.state.gamesAll} />                                              <MostPopular mostPopular={this.state.gamesMostPopular} />                                              </div>                                              )                                              }              }

Then what would a reusable component expect similar?

You lot could accept a certain way to intermission down CSS-designed lists that you want to reuse.

                          const List = props => {                                              return (                                              <div>                                              <div className="coolHeader">{props.title}</div>                                              <ul>                                              {props.list.map(listItem => {                                              <li className="coolListItem"}>{listItem}</li>                                              })                                              </ul>                                              </div>                                              )              }

See how that component reliably outputs whatever we laissez passer down to information technology via props? Our parent component'due south render function would contain the List components like and then:

                          return() {                                              return (                                              <div>                                              <List title="My Favorite Shoes" list={this.state.favoriteShoes} />                                              <List title="My Favorite Animals" list={this.country.favoriteAnimals} />                                              <List championship="My Favorite Websites" list={this.state.favoriteWebsites} />                                              </div>                                              )              }

Ahh… stateless components every bit they were meant to be used! Reusable-y!!!

Can stateful components be reusable?

Certainly, stateful components can be reused.

For case, a course that takes text input. No demand for the parent to keep track of that. Parent components holding state should exist like the motherboard of state, where merely essential 'states' are kept track of. (More than on this in the side by side chapter!)

Merely after you've written or thought up a schema of components, you want to figure out how yous can keep the number of components holding state to a minimum, so it's easier to continue track of state. If you're reusing stateful components, there's a risk you could do less work, and take a neater codebase. Ask yourself…

Which of these kid components can accept its parent hold state instead, and so the child component can only receive country as props?
Are there a lot of components keeping rail of state, when my life could exist simplified?
How else tin I minimize the number of components holding state?
And the worst question of all:Is in that location any data that is useful for a child component to keep track of using country, with no parental assistance?

Did you get to the last question? Is it blasphemy? Not at all! Hither is when stateful child components come in handy:

Instances when a kid component should go along track of its ain state (sorry, parent component!)

There are definitely instances when a child component would exist more apt to keep rail of its ain land, fifty-fifty when a parent could!

Generally, this occurs when:

the information is necessary but not a major theme of your projection
it is user-created data that the user may later 'submit'

One example would be a form the user is submitting.

With forms in React, we need to keep rail of what the user is typing. Simply is it really data we need the parent component to be holding in land?

Here is a reusable component managing its own state:

                          class TypeStuffIn extends Component {                                              constructor() {                                              super()                                              this.state = {                                              input: []                                              }                                              this.handleChange = this.handleChange.demark(this)                                              }                                              handleChange() {                                              this.setState({                                              [event.target.name]: effect.target.value                                                            })                                              }                                              return() {                                              return (                                              <div>                                              <input type="text" name="input" value={this.state.input} onChange={this.handleChange} />                                              </div>                                              )                                              }              }

Something the user is typing in isn't exactly something you lot want to continue track of in your parent component's state. There're probably more interesting things you lot desire to go along runway of in a parent component, like data your user requested, versus every single line of the user's address as they brand a purchase. For aesthetic and neatness purposes, state like that is perfectly viable to go along in the child component. Your boss will see that and be similar "oh yeah, that'southward boring — skillful move."

Review

Nosotros covered so much! Today nosotros learned:

What state actually is— data we hold that we're enlightened is subject to change
The literal difference between stateful and stateless components
When you lot would brand a component stateful or stateless — and now you lot know, it's a matter of starting time to type your lawmaking and figuring it out as you go, keeping in mind you lot want parent components to hold every bit much of the state as possible, while passing down data via props to reusable children components
The importance of keeping components every bit stateless and reusable as possible
Sometimes, information technology's very appropriate for a child component to manage state when it doesn't have to (if the information is miscellaneous or non integral to your project's theme)
Componentstin can exist reusable and take land!

It's a lot to go along track of, only this all becomes intuitive with practise. I hope you're feeling more confident with all things stateful, stateless and stately! If yous're ready to delve deeper into React, bank check out Mosh'south React course.