React 101

Anh-Thi Dinh
draft
React
⚠️
This is a quick & dirty draft, for me only!

Handle errors

Note: Nextjs / Vercel / React related errors and solutions

Class vs Functional components

What are React pure functional components? - LogRocket Blog

Parent ↔ children

Children → parent

  • Idea: use Context (sẽ hạn chế được việc define quá nhiều nested properties trong các children)

Ref to a components

1// React component
2import React from "react";
3const ActionButton = ({ label, action }) => {
4  return <button onClick={action}>{label}</button>;
5};
6export default ActionButton;
7
8// gain access to the actual HTML element
9return (
10  <button onClick={action} ref={buttonRef}>
11    {label}
12  </button>
13);

Parent controls ref inside children

  • 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 div in parent, how to “forward” it to its children?

useEffect

useEffect – React

Promise or async inside useEffect?

👇 Using Async Await Inside React's useEffect() Hook - Ultimate Courses
1useEffect(() => {
2  fetchUsers().then((users) => setUsers(users));
3}, []);
4if (!users) return <div>Loading...</div>;
1// Method 2
2useEffect(() => {
3  (async () => {
4    const users = await fetchUsers();
5    setUsers(users);
6  })();
7
8  return () => {
9    // this now gets called when the component unmounts
10  };
11}, []);
12
13// Or
14useEffect(() => {
15  const getUsers = async () => {
16    const users = await fetchUsers();
17    setUsers(users);
18  };
19
20  getUsers(); // run it, run it
21
22  return () => {
23    // this now gets called when the component unmounts
24  };
25}, []);

useRef

Make sure the ref.current is ready!
1export default function FakeComponent() {
2	const [inputReady, setInputReady] = React.useState(false)
3	useEffect(() => {
4    setInputReady(true)
5    if (cmtInputRef.current) {
6      // do things with cmtInputRef.current
7    }
8  }, [])
9	return (
10		<div
11		  ref={cmtInputRef}
12			contentEditable={true}
13		  suppressContentEditableWarning={true}
14		/></div>
15	)
16}

useCallback()

  • 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 time useCallback() comes in!

Optimization

  • Sử dụng useMemo và useCallback để optimize a child component (child không cần re-render mỗi khi parent re-renders)!

Form

Watch changes

We use react-hook-form. In this example, we show how to use HeadlessUI's Radio Group too.

Disable button if there is no changes

Read more in this block.

Invoke submit a form of parent from children

Uncontrolled vs controller

  • 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.

Watch the change if .innerHTML changes

.oninput() is not working!