Build interfaces with mini-react

mini-react is a single file. Copy mini-react.global.js from the dist folder next to your HTML page and load it with a normal script tag. It creates one global object, MiniReact, with everything in it.

index.html<div id="app"></div>

<script src="mini-react.global.js"></script>
<script>
  const { h, createRoot } = MiniReact;

  const app = h('h1', null, 'Hello, world!');
  createRoot(document.getElementById('app')).render(app);
</script>

That page works when you double-click it, with no server and no build step. Two functions do all the work:

• h(type, props, ...children) describes a piece of UI. It returns a plain object. Nothing appears on the page yet.
• createRoot(element).render(ui) takes that description and builds the real page inside element.

Try it below. In the examples, container is the result area, and all the functions from MiniReact are already available.

Try this: change the text, or change 'h1' to 'h3', and press Run.

The first argument of h() is a tag name. The second is an object of props (attributes, styles, events), or null. Everything after that is children: text, numbers, other elements or arrays of them.

• Use className for CSS classes and htmlFor on labels, like in React.
• style takes an object. Numbers get px added, except for things like opacity and zIndex.
• null, false and true render nothing. That makes condition && h(...) a handy way to show something only sometimes.
• An array of elements renders each item. Give each one a key (more in Lesson 6).

Try this: set online to false, and add a fourth task to the list.

A component is a function that takes props and returns elements. Use it by passing the function itself to h() instead of a tag name: h(Avatar, {'{'} name: 'Ada' {'}'}). Component names start with a capital letter by convention.

Whatever you put between the tags arrives as props.children. That lets you build wrappers like cards, dialogs and layouts.

Try this: give one Avatar a size of 64, and add a third UserCard.

A component can return an element, a string, an array, or null to render nothing. To return several elements without a wrapper div, use a Fragment: h(Fragment, null, a, b, c).

Components remember values with state. useState(initial) returns the current value and a function to change it. When you call that function, mini-react runs your component again and updates the page where something changed.

Watch the log as you click. The "+2" button calls setCount twice, but the component renders only once. Updates made at the same time are batched into one render.

Use the function form setCount(c => c + 1) when the new value depends on the old one. With setCount(count + 1) twice, both calls would see the same old count, and you'd only get +1.

Objects and arrays: make a new copy

mini-react compares the old and new state with Object.is. If you change an object in place and pass the same object back, nothing looks different, so nothing re-renders. Create a new object or array instead, with spread (...), map or filter.

Try this: uncomment the "wrong" button and click it. The list doesn't update until something else causes a render.

Props that start with on are event handlers: onClick, onInput, onKeyDown, onSubmit, onMouseEnter and so on. The handler gets the browser's normal event object.

For form fields, pass the value from state and update the state in onChange. This is called a controlled input: state is the single source of truth, so you can validate, reset or transform the value at any time. Like in React, onChange on a text field fires on every keystroke.

• Text fields and selects use value. Checkboxes and radio buttons use checked.
• One update function handles every field, by reading the field's name.
• Call e.preventDefault() in onSubmit, or the browser reloads the page.

To render a list, map your data to elements. Give each element a key that is unique among its siblings and stays the same for the same item, such as an id from your data.

Keys tell mini-react which item is which between renders. When the list is reordered or an item is removed, each existing item keeps its page element and its state, and only the moved items are touched.

Avoid using the array index as the key for lists that can be reordered or filtered. When an item is removed, every item after it gets a new index, and state can end up attached to the wrong item. The "Why keys matter" panel in the demos shows this side by side.

Rendering should only calculate what to show. Everything else is a side effect: timers, requests, subscriptions, or working with the page directly. Put those in useEffect(fn, deps). It runs after the page is updated.

• deps is a list of values. The effect runs again only when one of them changes.
• [] means "only after the first render".
• Leave out deps to run after every render.
• Return a cleanup function to undo the effect. It runs before the effect runs again, and when the component is removed.

Click "Hide clock" and watch the log. Without the cleanup, the timer would keep running after the clock is gone.

Loading data

Effects are also where you load data. Put everything the request depends on in deps. Use a flag in the cleanup to ignore answers that arrive after a newer request started, or a slow old answer could replace a newer one.

Try this: type fast. The log shows which answers were ignored because a newer search had already started.

useRef(initial) gives you a box, {'{'} current: initial {'}'}, that keeps its content between renders. It has two uses:

• Reaching page elements. Pass the ref as the ref prop. After rendering, ref.current is the real element, so you can call focus(), measure it, or draw on a canvas.
• Remembering values without re-rendering. Changing ref.current does not cause a render. Use it for timer ids, previous values or counters you don't display.

Only read refs to elements in effects or event handlers. During the first render the element doesn't exist yet, so ref.current is still null.

When state has several related parts and many ways to change, keep all the logic in one function, a reducer. It receives the current state and an action that describes what happened, and returns the new state. Components only dispatch actions.

The reducer is a plain function with no mini-react in it, so it's easy to read and to test on its own. The same rule as useState applies: always return a new object when something changes.

Passing the same prop through many layers gets tiring. Context lets a component far down the tree read a value directly.

1. Create it: const ThemeContext = createContext('light'). The argument is the default value.
2. Provide a value: h(ThemeContext.Provider, {'{'} value: theme {'}'}, ...children).
3. Read it anywhere below: const theme = useContext(ThemeContext).

When the provided value changes, every component that reads it re-renders, even if a component in between uses memo (Lesson 12).

A custom hook is a function whose name starts with use and that calls other hooks. It lets you reuse stateful logic between components. Each component that calls it gets its own separate state.

useInterval keeps the latest callback in a ref. The interval itself only restarts when the delay changes, but it always calls the newest version of your function, with the newest state.

The rules of hooks. Call hooks at the top level of a component or a custom hook, in the same order on every render. Don't call them inside if, loops or event handlers. mini-react finds each hook's data by its position in the call order, like React does.

When a component renders, its children render too. That's usually fast enough, because mini-react only changes the parts of the page that actually differ. For big lists or slow components, three tools help:

Try this: type in the note field, and the log stays quiet because the rows are skipped. Then remove useCallback (keep the arrow function) and type again. Every row renders on each keystroke, because onToggle is a new function every time.

memo takes an optional second argument, areEqual(prevProps, nextProps). Return true to skip the render.

This app uses almost everything from the tutorial:

• A reducer for the books.
• Context to hand dispatch to any component.
• A controlled form, with a ref that puts focus back into the title field after you add a book.
• memo rows with keys.
• useMemo for the filtered list and the stats.

Read it from the bottom up: App first, then the pieces it uses.

Ideas to extend it: sort by rating, add a "delete" button, or show the average rating of the books you've read.

Everything so far used h() directly, so it runs without any tools. For bigger projects you may prefer JSX, the HTML-like syntax React uses. JSX is turned into h() calls by a build tool. These two are the same:

Without JSXh('button', { className: 'primary', onClick: save }, 'Save ', count)

With JSX<button className="primary" onClick={save}>Save {count}</button>

To use JSX, import from the module version, mini-react.js, and tell your build tool to use h and Fragment. With esbuild:

app.jsximport { h, Fragment, createRoot, useState } from './mini-react.js';

function App() {
  const [name, setName] = useState('Vlad');
  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Hello, {name}!</p>
    </>
  );
}

createRoot(document.getElementById('app')).render(<App />);

Terminalnpx esbuild app.jsx --bundle --jsx-factory=h --jsx-fragment=Fragment --outfile=app.js

Then load app.js with a normal script tag. In Vite, set esbuild: {'{'} jsxFactory: 'h', jsxFragment: 'Fragment' {'}'} in vite.config.js.

Modules without a build step: <script type="module"> with import {'{'} h {'}'} from './mini-react.js' also works, but browsers only allow modules from a web server, not from a file you double-click. Run npx serve . in the folder first.

Differences from React

• No class components, portals, Suspense, error boundaries or server rendering.
• defaultValue, defaultChecked and dangerouslySetInnerHTML aren't supported. Use controlled inputs, or set things through a ref.
• Handlers receive the browser's own event, not a React "synthetic" event. Listeners are attached to each element.
• useLayoutEffect behaves the same as useEffect. Both run right after the page is updated, before the browser paints.
• Rendering can't be split into smaller pieces. There is no startTransition, so a very large update renders in one go.