DDIRDDIR

Deeper Dive Into React

Hi, I'm jser.

One thing I love about React is its simplicity on mental model - we can just pretend that React re-renders everything on every state change.

But of course React itself is far from simple, React team is doing a great job in hiding the complexity for most use cases, yet people like me still get confused time to time.

I think this results from the huge gap between knowing how to work with React and knowing how React works.

And I'm creating this course to fill the gap.

Ugh, another React course?

There are already quite a few React courses out there, I know.

DDIR(Deeper Dive Into React) is not a course that teaches you how to use React since that is already covered by React.dev, rather it is an interactive journey to help you understand React internals by diving deeper.

With this course, you will have a much deeper understanding of React, by understanding the caveats, the trade-offs, and the design decisions behind React, I believe you will be able to write better React code.

Hmm, do I really need it?

Good question! Maybe not.

I'm not gonna trick you into this course because honestly it contains quite advanced topics and might not be suitable for everyone. It also requires effort to complete.

Give it a try at following random React quiz to see if you would like to know why. If you want to know and are determined to learn, then this course might be good for you.

useState() quirk [email protected], [email protected]
{...}
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { screen, fireEvent } from "@testing-library/dom";
function A() {
  console.log(2);
  return null;
}
function App() {
  const [_state, setState] = useState(false);
  console.log(1);
  return (
    <>
      <button
        onClick={() => {
          console.log("click");
          setState(true);
        }}
        data-testid="action"
      >
        click me
      </button>
      <A />
    </>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
const action = document.querySelector('[data-testid="action"]');
fireEvent.click(action);
fireEvent.click(action);
fireEvent.click(action);
click the button 3 times
{...}
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { screen, fireEvent } from "@testing-library/dom";
function A() {
  console.log(2);
  return null;
}
function App() {
  const [_state, setState] = useState(false);
  console.log(1);
  return (
    <>
      <button
        onClick={() => {
          console.log("click");
          setState(true);
        }}
        data-testid="action"
      >
        click me
      </button>
      <A />
    </>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
const action = document.querySelector('[data-testid="action"]');
fireEvent.click(action);
fireEvent.click(action);
fireEvent.click(action);
click the button 3 times
What gets logged in order?

click on the console.log lines to input your answer.

Interesting, what's in this course?

In this course you'll find lots of demos, videos, coding challenges and tools that make the learning process fun and engaging.

Below is a sneak peak of the curriculum, check out the available modules to get a better idea.

  • Build a To-Do App in Vanilla JavaScript
  • Fiber Architecture
  • Scheduling
  • Hooks
  • Event System
  • Hydration
  • RSC(React Server Components)
  • References
    • useCallback
    • useContext
    • useDebugValue
    • useDeferredValue
    • useEffect
    • useFormState
    • useFormStatus
    • useId
    • useImperativeHandle
    • useInsertionEffect
    • useLayoutEffect
    • useMemo
    • useOptimistic
    • useReducer
    • useRef
    • useState
    • useSyncExternalStore
    • useTransition
    • cache
    • createContext
    • forwardRef
    • lazy
    • memo
    • startTransition
    • use
    • Error Boundary
  • Tools

Cool, I want to try more modules!

I'm still working on them, but you can sign up to get notified when it's ready.

Would you like to share this course with your friends? 😳