6 věcí, které se nehodí pro vývoj aplikace na Reactu

Technologii React využívá např. Facebook, Instagram nebo Netflix. My také s Reactem pracujeme a vytváříme na tom svébytná řešení pro naše klienty. Proto vás chceme seznámit s důležitými aspekty, na které by si měl každý developer dávat dobrý pozor. A které to tedy jsou?

• Trávit příliš mnoho času v kuse nad stejnou problematikou
• Nekontrolovat nejnovější funkce a možnosti Reactu
• Používat zastaralé Class komponenty
• Deklarování nového state s null hodnotou
• Nepoužívání useEffect hook
• Nerefaktorovat zastaralý kód

Trávit příliš mnoho času v kuse nad stejnou problematikou

V každém vývoji webových aplikaci někdy dojde k momentu, kdy se vývojář na něčem zasekne. Někdy toto zaseknutí trvá několik hodin, někdy dokonce i několik dní. V každém případě to je velmi nepříjemné a frustrující. 

Proto je lepší po nějaké době od problematiky ustoupit a zaměřit se na něco jiné – ať už to je nějaká jiná práce na projektu, nebo vypnout počítač a soustředit se na nějakou jinou aktivitu. Většinou to hodně pomůže a s čistší hlavou se problém řeší lépe.

• K tématu: Psali jsme také o obecných chybách, kteří se vývojáři dopouštějí při vývoji mobilních aplikací jako je např. otázka výběru platformy či práce s požadavky na volné kapacitní místo. A co to vlastně mobilní aplikace je a kolik stojí?

Nekontrolovat nejnovější funkce a možnosti Reactu

Někdy vývojář uzavře sám sebe do své vlastní vývojářské bubliny. Problémy specifického typu řeší pouze svojí metodou – někdy zastaralou. Proto je dobré průběžně studovat nejnovější dokumentaci Reactu, nebo si narychlo přečíst nějaké aktuální články, třeba na oficiálním React blogu. 

Je dobré si takto rozšířit vědomosti, jak některé typy problémů řešit. Kolikrát se může stát, že vývojář neřeší problém úplně ideálně a moderně.

Používat zastaralé Class komponenty

Vlastní komponenty lze v Reactu psát dvěma způsoby – Class nebo Function. Modernější řešení je právě to druhé – Function. Kód ve funkcionální komponentě je čistší a zároveň rychlejší. Také se snadněji čte a lépe se v něm orientuje. 

Zároveň může být i znatelně kratší, což koresponduje s lepší čitelností. Proto je vždy lepší začít už od začátku psát komponentu funkcionálního typu.

Proces tvorby komponent obou typů reflektuje například následující naučné video:

Deklarování nového state s null hodnotou

To je poměrně často se vyskytující chyba, která někdy může způsobit hodně nepříjemného debuggování. 

Problémem je, že aplikace dovoluje inicializovat parametry s defaultní hodnotou, jestliže žádná hodnota neexistuje, nebo je hodnota undefined. V tomto případě i přesto, že je null prázdná hodnota, pořád je to hodnota. Toto může způsobit pád aplikace. 

Nepoužívání useEffect hook

UseEffect hook je moderní a velmi důležitá funkce funkcionálních komponent. Tento hook umožňuje zavolat funkci či metodu (nebo jinou část kódu) hned po vyrenderování komponenty. 

Ve starších Class komponentách se k tomuto používala funkce componentDidMount. Ale useEffect hook je velmi výhodný v tom, že může zavolat kód i v momentě, kdy se nějaká hodnota (např. state) změní. Tímto useEffect kombinuje starší funkce, jako componentDidMount a componentDidUpdate. Opět to velmi zkracuje kód i čas.

Nerefaktorovat zastaralý kód

To je další běžná věc, která se objevuje ve většině projektů, jež jsou ve vývoji delší dobu. Vývojář může narazit na část kódu, která není úplně aktuální a používá zastaralé funkce.

Nejčastější výmluvou na oddalování refaktoringu je nedostatek času. Každopádně refaktoring je problematika, která by se měla řešit. Kód by měl být vždy aktuální a bezpečný napříč projektem. Když je například zastaralý přihlašovací proces, vznikají určitá bezpečnostní rizika. Na některých nevýznamných místech je možné mít starší kód, ale v těch důležitých místech se doporučuje používat nejaktuálnější metody a funkce.