CODEWITHSUNDEEP
reactjsreact-state-management
Evan Lalo
Evan Lalo

Reputation: 1273

Best Way to Handle Multiple State Changes

I'm pretty new to react. I'm building a web app that is working pretty well but I'm not sure I'm handling state changes correctly. For instance, I have a method that gets called in componentDidMount.

It's seems inefficient and bad practice to keep calling setState but I'm not really sure of a better way to do it.

I would love some feedback.

class AuditScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      currentVehicle: null,
      currentVehicleIndex: 0,
      vehicles: [],
      activePictureIndex: 0,
      show: false,
      loading: false,
      next_page: `${props.backend.id}/images`,
    };
  }

  componentDidMount() {
    this.getImages()
  }


  getImages() {
    if (!this.state.loading) {
      this.setState({
        loading: true,
      });
      this.registerScrollEvent();
      axios.get(this.state.next_page)
        .then((response) => {
          const paginator = response.data;
          const vehicles = paginator.data.filter((vehicle) => {
            if (vehicle.enhanced && vehicle.enhanced.length) {
              return vehicle;
            }
          });
          if (vehicles && vehicles.length) {
            this.setState({
              vehicles: [...this.state.vehicles, ...vehicles],
              next_page: paginator.next_page_url,
            });

            if (this.state.currentVehicle === null) {
              this.setState({
                currentVehicle: vehicles[0]
              });
            }
          }

          // remove scroll event if next_page_url is null
          if (!paginator.next_page_url) {
            this.removeScrollEvent();
          }
        })
        .finally((response) => {
          this.setState({
            loading: false,
          });
        });
    }
  }
}

.....

}

Thanks!

Upvotes: 0

Views: 1424

Answers (2)

edemaine
edemaine

Reputation: 3120

Like @Dave Newton says, I don't think this is bad practice. Updating the state doesn't immediately trigger an update. Instead, state updates often (but not always) batch up and then trigger a single update.

This article explains the batching mechanism in detail. Up to React 17, state-update batching only occurs within event handlers and within componentDidMount. They give an explicit example where "setState is called inside componentDidMount which causes only one extra update (and not three)".

So React already does what you want. React 18 is going to give you more control over the batching behavior, and more automatic batching. I found this description helpful for understanding what's coming and also how React 17 and lower currently work.

Upvotes: 1

Martes Carry
Martes Carry

Reputation: 41

if you don't want to stop calling the setState method in react, use context for small project or redux to keep states and reducers with functional components. Best regards.

Upvotes: 1

Related Questions