A Reactban az aszinkron renderelés megvalósításának részeként van néhány életciklus-módszer, amelyek a React 17-ben elavulttá válnak (lásd React Blog). Egy gyakran használt közülük a componentWillReceiveProps. A legtöbb esetben egy komponens
props változásának kezelésére használják.

Tehát mit tegyünk?

Az egyik megoldás a static getDerivedStateFromProps metódus használata. Van egy nagyszerű ‘HowTo’ dev.to Post Larry Price-tól.

A másik megoldás a React Hooks használata, különösen a useEffect() Hook. Ez egy szép megoldás lehet, ha van egy kis komponensed, és ezen a módosításon belül szeretnél átváltani egy funkcionális komponensre.

Itt egy egyszerű példa. Képzeljük el, hogy egy táblázat komponenst renderelünk egy elemeket tartalmazó listával. Minden elemnek kezdetben a doSomething() metóduson kell átfutnia.

előző kód

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

Hookokkal

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

A useEffect() Hookot használhatjuk, amely alapértelmezés szerint minden rendereléskor lefut. A felesleges hívások elkerülése érdekében a második paraméterként -t használjuk. Így a useEffect() csak akkor fut le, ha a items tulajdonság megváltozott.

Fontos megjegyzés

A getDerivedStateFromProps() vagy useEffect() váltás előtt ellenőrizni kell, hogy valóban szükség van-e erre a tulajdonságkezelésre. Nézd meg ezt a hivatalos React blogbejegyzést a gyakori hibákról és anti-patternekről.

Néha akkor is írunk néhány tulajdonságot az állapotba, ha nincs rá szükség. Ha például egy listát kell rendezni, ami egy tulajdonságból származik, akkor ezt a renderelés során tegyük meg, és ne írjuk be a komponens állapotába.