Reserved. I ❤ ReactJS • useCallback – Caches the function. • useMemo – Caches value returned from a function call. • useReducer(reducer, initialArg, init?) dispatch(action) ⟶ reducer ⟶ update state ⟶ render immer (library) for JS style immutable object and array manipulation. • Strict Mode – Components are mounted twice for bug check. • Every render is like a Frame/Snapshot in a movie. (...sshh...closures at play) More Hooks
Reserved. I ❤ ReactJS • Native Form controls have internal state. • Controlled Components – state and handler (from value/checked) • Uncontrolled Components – internal state • defaultValue – initial value for uncontrolled • useRef for uncontrolled • react-hook-form library https://react-hook-form.com Form
Reserved. I ❤ ReactJS Uncontrolled vs Controlled feature uncontrolled controlled One time value retrieval (e.g. on submit) ✅ ✅ Validating on submit ✅ ✅ Instant field validation ❌ ✅ Conditionally disabling submit button ❌ ✅ Enforcing input format ❌ ✅ Several inputs for one piece of data ❌ ✅ Dynamic inputs ❌ ✅
Reserved. I ❤ ReactJS • Create a Products component with a list of products (pre-defined). • Each product will have a "Add to Cart" button. • Add "Create Product Form" with Product "name", "price", and "availability" • Create a Cart component with a list of products • Each item should have "name", "price per unit", "quantity", "total price". • At the bottom, it should show total "quantity" and "price" of all the items. • Think your own UI... Exercise
%20(enhanced).png){kind=avatar}
%20(enhanced).png){kind=avatar}
%20(enhanced).png){kind=avatar}
abhisekp
yasaichi
hokaccha
satokoki645
seyfoyun
chobishiba
nyawach
takefumiyoshii
talyssonoc
simas
chriskrycho
meteatamel
fractaledmind
marcelosomers
chriscoyier
dotmariusz
frogandcode
schacon
chrislema
panda_program
erikaheidi
akosma
jacobian
![QUESTIONS? React out via [email protected] https://about.me/abhisekp](https://files.speakerdeck.com/presentations/f8d1ea05c5354f3f8b35171b3cd84399/slide_8.jpg){kind=link}