Jako część implementacji renderowania async w React, istnieje kilka metod cyklu życia, które zostaną zdeprecjonowane w React 17 (patrz React Blog). Często używaną z nich jest componentWillReceiveProps. W większości przypadków jest ona używana do obsługi
zmian rekwizytów komponentu.

Więc co robić?

Jednym z rozwiązań jest użycie metody static getDerivedStateFromProps. Istnieje świetny 'HowTo’ dev.to Post od Larry Price.

Innym rozwiązaniem jest użycie React Hooks, w szczególności useEffect() Hook. Może to być miłe rozwiązanie, jeśli masz mały komponent i chcesz przełączyć się na funkcjonalny komponent w ramach tej zmiany.

Tutaj jest prosty przykład. Wyobraźmy sobie, że renderujemy komponent tabeli z listą elementów. Wszystkie elementy muszą początkowo przejść przez metodę doSomething().

poprzedni kod

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

z Hookami

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

Możemy użyć Hooka useEffect(), który domyślnie jest uruchamiany przy każdym renderowaniu. Aby uniknąć niepotrzebnych wywołań, używamy jako drugiego parametru. Tak więc useEffect() uruchamia się tylko wtedy, gdy właściwość items uległa zmianie.

Ważna uwaga

Przed przejściem na getDerivedStateFromProps() lub useEffect() powinieneś sprawdzić, czy naprawdę potrzebujesz tej obsługi właściwości. Spójrz na ten oficjalny blog React Blogpost dla wspólnych błędów i anty-wzorców.

Czasami zapisujemy niektóre właściwości do stanu, nawet jeśli nie musimy tego robić. Jeśli na przykład potrzebujesz posortować listę, która pochodzi z właściwości, zrób to podczas renderowania i unikaj zapisywania jej w stanie komponentu.