Introduction

MobX in React brings easy reactivity to your components. It can handle whole application state as well.

This site shows examples with React functional components and Hooks. Class components work in a similar way. In case there is class-specific behavior, we will mention it and supply an appropriate example.

Check out the example of the amazing Todo application or continue reading on why to observe or how to manage state.

Do you want to migrate toward Hooks? Have a look at our migration guide.

  1. import React from 'react'
  2. import { observer, useLocalStore } from 'mobx-react' // 6.x or mobx-react-lite@1.4.0
  4. export const TodoList = observer<{ initialTodos: string[] }>(
  5.   ({ initialTodos }) => {
  6.     const todoRef = React.useRef()
  7.     const store = useLocalStore(() => ({
  8.       todos: createTodos(initialTodos) as Record<string, boolean>,
  9.       get pendingTodos() {
  10.         return Object.keys(store.todos).filter(
  11.           todo => store.todos[todo] === false,
  12.         )
  13.       },
  14.       get doneTodos() {
  15.         return Object.keys(store.todos).filter(
  16.           todo => store.todos[todo] === true,
  17.         )
  18.       },
  19.       addTodo: () => {
  20.         store.todos[todoRef.current.value] = false
  21.         todoRef.current.value = ''
  22.       },
  23.       toggleTodo: (todo: string) => {
  24.         store.todos[todo] = !store.todos[todo]
  25.       },
  26.     }))
  28.     const renderTodo = (done: boolean) => todo => (
  29.       <Todo key={todo} done={done} text={todo} onToggle={store.toggleTodo} />
  30.     )
  32.     return (
  33.       <form onSubmit={store.addTodo}>
  34.         {store.pendingTodos.map(renderTodo(false))}
  35.         {store.doneTodos.map(renderTodo(true))}
  36.         <br />
  37.         <input ref={todoRef} />
  38.         <button>Add todo</button>
  39.       </form>
  40.     )
  41.   },
  42. )