Can't get componentDidUpdate() stop looping

Question

I'm trying to fetch data from a public API with Axios, and display what I get through a React app. But I can't find a condition in my componentDidUpdate() to make it render only once, when the user modifies input. Anyone'd have an idea ?

Here's my code :

import React, { Component } from 'react';
import axios from "axios";
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      output: []
    }
  }

  componentDidUpdate() {
    axios.get(`https://geo.api.gouv.fr/communes?nom=${this.state.input}`)
      .then(response => {
        this.setState((prevState) => {
          if (prevState.input !== this.state.input) {
            return { output: response.data };
          }
        });
      })
      .catch(function (error) {
        console.log(error);
      })
  }

  handleInput = (event, input) => {
    this.setState({input: event.target.value});
  }

  render() {
    return (
      <React.Fragment>
        <label>Recherche : <input type="text" onChange={this.handleInput} /></label>
        <div>
          {this.state.output.map((value, index) => <p key={index}>{value.nom}</p>)}
        </div>
      </React.Fragment>
    );
  }
}

export default App;

Thanks for helping.

Answer 1

Assuming you need to take an action everytime your state change, you need to check if the state has updated before triggering an action in componentDidUpdate otherwise API call will be made whenever your component updates.

If you only wish to call the API once, then call it in componentDidMount

componentDidUpdate(prevProps, prevState) {

    if(prevState.input !== this.state.input) {
        axios.get(`https://geo.api.gouv.fr/communes?nom=${this.state.input}`)
          .then(response => {
            this.setState({ output: response.data });
          })
          .catch(function (error) {
            console.log(error);
          })
    }
}