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

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

Ref to a components

// React component
import React from "react";
const ActionButton = ({ label, action }) => {
  return <button onClick={action}>{label}</button>;
};
export default ActionButton;

// gain access to the actual HTML element
return (
  <button onClick={action} ref={buttonRef}>
    {label}
  </button>
);

Parent controls ref inside 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 div in parent, how to “forward” it to its children?
  • My solution (not optimized)

useEffect

useEffect – React

Promise or async inside useEffect?

👇 Using Async Await Inside React's useEffect() Hook - Ultimate Courses

useEffect(() => {
  fetchUsers().then((users) => setUsers(users));
}, []);
if (!users) return <div>Loading...</div>;