Als onderdeel van de implementatie van async-rendering in React, zijn er enkele lifecycle-methodes die in React 17 zullen worden afgeschreven (zie React Blog). Een veel gebruikte is componentWillReceiveProps. In de meeste gevallen wordt deze gebruikt om de
props verandering van een component af te handelen.

Dus wat te doen?

Eén oplossing is om de static getDerivedStateFromProps methode te gebruiken. Er is een geweldige ‘HowTo’ dev.to Post van Larry Price.

Een andere oplossing is het gebruik van React Hooks, met name de useEffect() Hook. Dit zou een mooie oplossing kunnen zijn als je een kleine component hebt en binnen deze wijziging wilt overschakelen naar een functionele component.

Hier is een eenvoudig voorbeeld. Stel we renderen een tabel component met een lijst van items. Alle items moeten in eerste instantie door de methode doSomething() lopen.

vorige code

doSomething (items) { // some code to sort items ... return items}state = { items: this.props.items}componentWillReceiveProps (nextProps) { this.setState({ items: doSomething(nextProps.items) })}

met Hooks

const doSomething = (items) => { // some code to sort items ... return items}const = useState(doSomething(props.items))useEffect(() => { setItems(defaultSorting(items))}, )

We kunnen de useEffect() Hook gebruiken die standaard bij elke render wordt uitgevoerd. Om onnodige aanroepen te voorkomen, gebruiken we als tweede parameter. Dus useEffect() loopt alleen als de property items is veranderd.

Belangrijke mededeling

Voordat u overschakelt op getDerivedStateFromProps() of useEffect() moet u controleren of u deze property handling echt nodig heeft. Kijk eens naar deze officiële React Blogpost voor veelvoorkomende bugs en anti-patterns.

Soms schrijven we sommige eigenschappen naar de status, zelfs als we dat niet nodig hebben. Als je bijvoorbeeld een lijst moet sorteren die afkomstig is van een eigenschap, doe dat dan tijdens de render en vermijd het schrijven in de component state.