Ca parte a implementării redării asincrone în React, există câteva metode de ciclu de viață care vor fi depreciate în React 17 (a se vedea React Blog). Una folosită frecvent este componentWillReceiveProps. În cele mai multe cazuri este folosită pentru a gestiona
schimbarea
props a unei componente.

Deci, ce este de făcut?

O soluție este de a folosi metoda static getDerivedStateFromProps. Există un excelent ‘HowTo’ dev.to Post de la Larry Price.

O altă soluție este de a folosi React Hooks, în special useEffect() Hook. Aceasta ar putea fi o soluție bună dacă aveți o componentă mică și doriți să treceți la o componentă funcțională în cadrul acestei modificări.

Iată un exemplu simplu. Imaginați-vă că redăm o componentă de tabel cu o listă de elemente. Toate elementele trebuie să treacă inițial prin metoda doSomething().

cod anterior

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

cu Hooks

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

Potem folosi Hook-ul useEffect() care în mod implicit rulează la fiecare randare. Pentru a evita apelurile inutile, folosim ca al doilea parametru. Astfel, useEffect() se execută numai atunci când proprietatea items s-a modificat.

Notă importantă

Înainte de a trece la getDerivedStateFromProps() sau useEffect() trebuie să verificați dacă aveți cu adevărat nevoie de această gestionare a proprietății. Aruncați o privire la acest React Blogpost oficial pentru bug-uri comune și anti-pattern.

Câteodată scriem unele proprietăți în stare chiar dacă nu avem nevoie. Dacă, de exemplu, trebuie să sortați o listă care provine dintr-o proprietate, faceți-o în timpul redării și evitați să o scrieți în starea componentei.

.