Som en del av implementeringen av asynkron rendering i React finns det några livscykelmetoder som kommer att vara deprecierade i React 17 (se React Blog). En vanligt förekommande metod är componentWillReceiveProps. I de flesta fall används den för att hantera
propsändringen av en komponent.

Så vad ska man göra?

En lösning är att använda static getDerivedStateFromProps-metoden. Det finns en bra ”HowTo” dev.to Post från Larry Price.

En annan lösning är att använda React Hooks, särskilt useEffect() Hook. Detta kan vara en bra lösning om du har en liten komponent och vill byta till en funktionell komponent inom denna ändring.

Här är ett enkelt exempel. Tänk dig att vi renderar en tabellkomponent med en lista med objekt. Alla objekt måste inledningsvis köras genom metoden doSomething().

förra koden

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

med Hooks

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

Vi kan använda useEffect() Hook som som standard körs vid varje rendering. För att undvika onödiga anrop använder vi som andra parameter. Så useEffect() körs bara när egenskapen items har ändrats.

Viktigt meddelande

För att byta till getDerivedStateFromProps() eller useEffect() bör du kontrollera om du verkligen behöver denna egenskapshantering. Ta en titt på denna officiella React Blogpost för vanliga buggar och anti-mönster.

Ibland skriver vi vissa egenskaper till tillståndet även om vi inte behöver det. Om du till exempel behöver sortera en lista som kommer från en egenskap, gör det under renderingen och undvik att skriva det i komponenttillståndet.