- Idea: use Context (sẽ hạn chế được việc define quá nhiều nested properties trong các children)
- Ref a DOM element in child → sau đó control this element trong parent: forwardRef – React
- Trong trường hợp ko muốn parent control tất cả các methods của DOM element trong children (giả sử chỉ cho phép control cái
focus()ko thôi → useImperativeHandle – React
- ❓Ref to a
divin parent, how to “forward” it to its children?
Make sure the
ref.current is ready!- By default, when a component re-renders, React re-renders all of its children recursively ← trong trường hợp ko muốn các children component re-render → sử dụng
memo← tuy nhiên, cái này chỉ hữu dụng khi các props của child không thay đổi. Tuy nhiên, nếu props của child là 1 hàm từ cha mà cha re-renders → hàm đó cũng thay đổi → props của child cũng thay đổi theo → re-renders everytime! ← It’s the timeuseCallback()comes in!
- Sử dụng
useMemovàuseCallbackđể optimize a child component (child không cần re-render mỗi khi parent re-renders)!
We use react-hook-form. In this example, we show how to use HeadlessUI's Radio Group too.
Read more in this block.
- In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
- a component is “controlled” when the important information in it is driven by props rather than its own local state.
- Read more: Controlled and uncontrolled components
.oninput() is not working!