Som en del af implementeringen af asynkron gengivelse i React er der nogle få livscyklusmetoder, som vil blive forældet i React 17 (se React Blog). En almindeligt anvendt er componentWillReceiveProps. I de fleste tilfælde bruges den til at håndtere
propsændringen af en komponent.

Så hvad skal man gøre?

En løsning er at bruge static getDerivedStateFromProps-metoden. Der er en stor ‘HowTo’ dev.to Post fra Larry Price.

En anden løsning er at bruge React Hooks, især useEffect() Hook. Dette kan være en god løsning, hvis du har en lille komponent og ønsker at skifte til en funktionel komponent inden for denne ændring.

Her er et simpelt eksempel. Forestil dig, at vi gengiver en tabelkomponent med en liste over elementer. Alle elementer skal i første omgang køre gennem doSomething()-metoden.

Forrige kode

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 bruge useEffect() Hook, der som standard kører ved hver rendering. For at undgå unødvendige kald bruger vi som den anden parameter. Så useEffect() kører kun, når egenskaben items er ændret.

Vigtig meddelelse

Hvor du skifter til getDerivedStateFromProps() eller useEffect(), bør du kontrollere, om du virkelig har brug for denne egenskabsbehandling. Tag et kig på dette officielle React Blogpost for almindelige fejl og anti-mønstre.

I nogle tilfælde skriver vi nogle egenskaber til tilstanden, selv om vi ikke har brug for det. Hvis du f.eks. har brug for at sortere en liste, som kommer fra en egenskab, skal du gøre det under renderingen og undgå at skrive det i komponenttilstanden.