När använder man componentDidMount i React?

Will & Skill består bland annat av ett gäng riktigt duktiga react-utvecklare. Vi jobbar med att bygga system som underlättar vardagen för våra kunder och dess slutanvändare. För att uppnå detta på ett effektivt sätt använder vi ett ramverk som heter React! React-projekt byggs upp av flera små React-komponenter. Dessa React komponenter har vissa inbyggda metoder. Nedan pratar vi om hur man kan använda en av dessa: componentDidMount

En React-komponent har ett par life-cycle metoder som triggas bland annat när komponenten "skapas" och "förstörs". ComponentDidMountär en av dessa.

När triggas componentDidMount?

Metoden triggas när en komponent precis har initieras. Rent tekniskt så händer detta när React lägger till noden till DOM:n (Document Object Model).

Javascriptimport React, { Component } from 'react';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      data: 'Will & Skill'
    }
  }

  fetchData(){
    setTimeout(() => {
      console.log('Fetch successful');
      this.setState({
        data: 'Hello Långholmsgatan'
      })
    }, 1000)
  }

  componentDidMount(){
    this.fetchData();
  }

  render() {
    return(
      <div>
      {this.state.data}
    </div>
    )
  }
}

export default App;

När används ComponentDidMount?

Metoden kan användas för att utföra allt man behöver göra innan komponenten renderas. Bland annat kan det användas till följande uppgifter:

• Hämta data från extern källa

• Manipulera data som mottagits från förälderkomponenten.

Detta var allt för denna gång!