Sometimes you need to react to changes to state. Typically you want to run some imperative logic related to something in the state changing.

  // Access and return some state to react to
  (state) =>,

  // Do something with the returned value
  (foo) => {},

    // If you return an object or array from the state you can set this to true.
    // The reaction will run when any nested changes occur as well
    nested: false,

    // Runs the reaction immediately
    immediate: false

There are two points of setting up reactions in Overmind.


The onInitializeOvermind action is where you set up reactions that lives throughout your application lifetime. The reaction function returns a function to dispose it. That means you can give effects the possibility to create and dispose of reactions in any action.

export const onInitializeOvermind = ({ effects }, instance) => {
    ({ todos }) => todos,
    (todos) =>,
      nested: true


With components you typically use reactions to manipulate DOM elements or other UI related imperative libraries.

import * as React from 'react'
import { useReaction } from '../overmind'

const App = () => {
  const reaction = useReaction()

  React.useEffect(() => reaction(
    ({ currentPage }) => currentPage,
    () => {
      document.querySelector('#page').scrollTop = 0

  return <div id="page"></div>

export default App

Last updated