V rámci implementace asynchronního vykreslování v Reactu existuje několik metod životního cyklu, které budou v Reactu 17 zrušeny (viz React Blog). Často používanou z nich je componentWillReceiveProps. Ve většině případů se používá ke zpracování
změny vlastností komponenty.

Co tedy dělat?“

Jedním řešením je použití metody static getDerivedStateFromProps. Existuje skvělý ‚HowTo‘ dev.to Post od Larryho Price.

Dalším řešením je použít React Hooks, zejména useEffect() Hook. To může být pěkné řešení, pokud máte malou komponentu a chcete v rámci této změny přejít na funkční komponentu.

Tady je jednoduchý příklad. Představte si, že vykreslujeme komponentu tabulky se seznamem položek. Všechny položky musí zpočátku proběhnout metodou doSomething().

předchozí kód

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

s háčky

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

Můžeme použít háček useEffect(), který se standardně spouští při každém vykreslení. Abychom se vyhnuli zbytečným voláním, použijeme jako druhý parametr . Takže useEffect() se spustí pouze tehdy, když se změní vlastnost items.

Důležité upozornění

Před přepnutím na getDerivedStateFromProps() nebo useEffect() byste si měli ověřit, zda tuto manipulaci s vlastnostmi opravdu potřebujete. Podívejte se na tento oficiální blogpost React, kde najdete běžné chyby a anti-patterny.

Někdy zapisujeme některé vlastnosti do stavu, i když to nepotřebujeme. Pokud například potřebujete setřídit seznam, který pochází z nějaké vlastnosti, udělejte to během vykreslování a vyhněte se zápisu do stavu komponenty.