Come parte dell’implementazione del rendering asincrono in React, ci sono alcuni metodi del ciclo di vita che saranno deprecati in React 17 (vedi React Blog). Uno usato comunemente è componentWillReceiveProps. Nella maggior parte dei casi viene utilizzato per gestire il
cambiamento dei prodotti di un componente.

Quindi cosa fare?

Una soluzione è quella di utilizzare il metodo static getDerivedStateFromProps. C’è un grande ‘HowTo’ dev.to Post di Larry Price.

Un’altra soluzione è usare React Hooks, specialmente il useEffect() Hook. Questa potrebbe essere una bella soluzione se hai un piccolo componente e vuoi passare ad un componente funzionale all’interno di questo cambiamento.

Ecco un semplice esempio. Immaginate che stiamo rendendo un componente tabella con una lista di elementi. Tutti gli elementi devono inizialmente passare attraverso il metodo doSomething().

Codice precedente

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

con Hooks

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

Possiamo usare l’Hook useEffect() che per default viene eseguito ad ogni rendering. Per evitare chiamate inutili, usiamo come secondo parametro. Così useEffect() viene eseguito solo quando la proprietà items è cambiata.

Avviso importante

Prima di passare a getDerivedStateFromProps() o useEffect() dovresti controllare se hai davvero bisogno di questa gestione delle proprietà. Date un’occhiata a questo blogpost ufficiale di React per i bug comuni e gli anti-pattern.

A volte scriviamo alcune proprietà nello stato anche se non ne abbiamo bisogno. Se per esempio avete bisogno di ordinare una lista che proviene da una proprietà, fatelo durante il rendering ed evitate di scriverlo nello stato del componente.

Si può fare.