#hejto #hejtocontent #programowanie #makingofhejto \ Dzień dobry! Ostatnio w pracy debatowaliśmy nad pewnym problemem - kris

#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:)

Komentarze (19)

CatharsisOsobistość9 miesięcy temu0

@kris No generalnie najprościej jest nie przechowywać niczego z formularza w React state, wtedy formularz nie laguje bo nie rerenderuje go całego przy każdym inpucie. Mantine w swoich formularzach ma np. opcje "uncontrolled mode" i dosłownie maja napisane: "Controlled mode is not recommended for large forms". Nie wiem jak to u was wygląda w tej bibliotece bo nigdy z niej nie korzystałem. Ogólnie nie jestem też jakimś expertem Reacta żeby nie było xD. https://mantine.dev/form/uncontrolled/

Uncontrolled mode | Mantineuse-form uncontrolled mode to improve performanceMantine

krisTytan9 miesięcy temu0

@Catharsis co do formularzy z inputami w trybie uncontrolled - raczej ich do tej pory nie używałem a to głównie dlatego, że poniekąd wymuszały to biblioteki, z których korzystałem. react-hook-form jest pod tym względem trochę inny bo wewnętrznie właśnie obsługuje inputy jako "uncontrolled" przez co automatycznie ogranicza liczbę renderów ale przy tym ma metody na dobranie się do aktualnej wartości wypełnionego pola - chyba dlatego w moim osobistym rankingu wygrywwa z formikiem :slightly_smiling_face:

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?

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

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

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

bartek555Lider9 miesięcy temu12

@kris jestem w szoku, ze nie potraficie tego naprawic. Przeciez wystarczy

onlystatGruba ryba9 miesięcy temu1

@bartek555 a poza tym ludzie

serelGruba ryba9 miesięcy temu11

@bartek555 oprócz tego ludzie

entropy_GURU9 miesięcy temu5

> czy zdarzyło się Wam zauważyć, że formularze na hejto czasem potrafią się przycinać albo działać wolniej?

@kris Tak, w każdym wątku gdzie jest 100+ komentarzy, a o co chodzi? xD

NiebieskiSzpadelNihilizmuLider9 miesięcy temu6

@entropy_ :grinning:

AdelbertVonBimbersteinLider9 miesięcy temu9

@kris jeżeli masz uwagi co do funkcjonowania portalu proszę o kontakt na

spam@hejto.pl

Moja administracja zajmie się tym niezwłocznie.

Pozdrawiam

#nowywlascicielhejto

AdelbertVonBimbersteinLider9 miesięcy temu2

@kris przesadziłem z twarogiem

FenAutorytet9 miesięcy temu5

@kris Skopiowało mu się raz za dużo! xD

krisTytan9 miesięcy temu15

@AdelbertVonBimberstein szefie, szef dziś pijany do roboty przyszedł?

boriLider9 miesięcy temu7

@kris Gdzie jest @owczareknietrzymryjski gdy jest naprawdę potrzebny?

owczareknietrzymryjskiMistrz9 miesięcy temu6

@kris @bori jestem w robocie. A tak serio to nie zauważyłem żeby się formularze muliły. Mulą się całe strony czasami jak jest od groma komentarzy (tak z 30+). Nie wiem czy ma to związek z tym ze formularze są ukrywane i pokazywane dopiero przy kliknięciu odpowiedz czy to jest inny problem.

krisTytan9 miesięcy temu5

@bori no właśnie, gdzie on jest :interrobang:

Wpis użytkownika kris w Programowanie

Komentarze (19)