Insight React.js

A try – Learn by sharing – Personal view

1. Why do we so emphasize React’s Mental Model
2. Debug a lightweight react-like framework to catch more details
3. Summary

the Goal of this Speech:

Sensitivity/Vague

🤌

Maybe help you to understand more easy

Further Reading

• fre.js
• Algebraic Effects for the Rest of Us
• React Fiber Architecture
• A deep dive into React Fiber
• 黄玄的回答
• React Fiber Deep Dive with Dan Abramov

Mental Model

How to handle reactivity?

• Vue
• Svelte

function App() {
  // maybe use external state with useSyncExternalStore
  let [count, setCount] = useState(0);

  useEffect(() => {
    // do some side effect
  }, []);

  return <div onClick={() => setCount(count + 1)}>{count}</div>;
}

Dive into the source code of Fre.js

Best practice with demo

Summary

• Prerequisites: Side Effect, Function Programing, imperative or declarative
• Why `useEffect` so frequently use and so confusable?
• Why should we use Restrict Mode consistent?
• Think about hook apis back again？

Thanks a lot😊