#makingofhejto - Hejto.pl (demo semantyczne)

#hejto #hejtocontent #programowanie #makingofhejto

Dzień dobry!

Ostatnio w pracy debatowaliśmy nad pewnym problemem z formularzami - zdarzało się, że zaczynały mocno lagować, szczególnie wtedy, kiedy

a) w formularzu występowało wiele inputów,

b) zmiany na jednym inpucie wpływały na wartość w innym (np. zmiany w polu "Title" wpływały na wartości w polu "Id").

Stack jaki tam aktualnie mamy to Formik + Yup. Z uwagi na fakt, że problem ten był już wcześniej łatany z różnym skutkiem to teraz padła decyzja na zmianę biblioteki obsługującej formularze - nowy stack to react-hook-form + zod.

Ta sytuacja przypomniała mi, że na hejto również korzystamy z Formik + Yup – może więc i u nas przydałaby się zmiana?

Chciałbym zapytać się:
1. Programistów #webdev #frontend #react - czy macie jakieś doświadczenia/przemyślenia w tym temacie?
2. Wszystkich Użytkowników - czy zdarzyło się Wam zauważyć, że formularze na hejto czasem potrafią się przycinać albo działać wolniej? (o problemie w działaniu formularza dodawania komentarza, kiedy jest sporo komentarzy już wiem i jak to ogarnę to będzie o tym osobny wpis :slightly_smiling_face:)

renkeriSum9 miesięcy temu5

@kris Z formik i react-hook-form nie korzystałem bardzo długo, ale z zod'a korzystam regularnie i jest super. Z takich swoich doświadczeń, to mi przy dużych formularzach pomagało wywalanie state skąd tylko się da. Kiedy każdy input ma swój state, to zaczyna to trochę mulić, a wszystko na dobrą sprawę w submit można wyciągnąć z FormData. Jeżeli chodzi o czyszczenie formularza, to przydaje się zmiana `key`, wtedy każdy input wraca do `defaultValue`. No ale wiem, że nie zawsze się tak da.

FormData - Web APIs | MDNThe FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch(), XMLHttpRequest.send() or navigator.sendBeacon() methods. It uses the same format a form would use if the encoding type were set to "multipart/form-data".MDN Web Docs

krisTytan9 miesięcy temu3

@renkeri ja właśnie o zod też wiele dobrego słyszałem, na pewno lepiej waliduje url bo yup przy poprawnym (trochę dziwnym ale jednak poprawnym) linku wywalał błąd a zod go przepuszczał. Rzeczywiście modyfikacja stanu może wpływać negatywnie na performance, szczególnie jak stan jest zadeklarowany w parencie z wieloma childrenami (co może występować u nas właśnie przy dużej ilości komentarzy) - na pewno sprawdzę ten trop

renkeriSum9 miesięcy temu3

@kris W takim razie do śledzenia re-renderów polecam React Scan.

React ScanReact Scan automatically detects and highlights components that cause performance issues in your React app. Drop it in anywhere – script tag, npm, you name it!React-scan

lurker_z_internetuGruba ryba9 miesięcy temu2

Rozwalającą się składnie posta przy edycji byście naprawili. Cytat przeskakuje zawsze na kolejny akapit.

krisTytan9 miesięcy temu1

@lurker_z_internetu podrzucisz jakieś screeny z przykładem niepoprawnego działania?

Pokaż więcej komentarzy (19)