useValues

Assure the logic is mounted and fetch values from it.

import { kea, useValues } from 'kea'

const logic = kea([])

function MyComponent() {
  const { counter, doubleCounter } = useValues(logic)

  return (
    <div>
      {counter} * 2 = {doubleCounter}
    </div>
  )
}

Re-rendering

A useValues hook will trigger a re-render if any action causes any of the subscribed values to change.

Only the affected component and its children will be re-rendered, not your entire application.

Note on destructuring

You can only use useValues with destructoring

const { a, b } = useValues(logic)

This is because internally useValues uses getter functions that call useSelector when a value is accessed. Because hooks need to always be called in the same order, you can't just store the object returned from useValues and then use its properties later in the code. Doing so might call the internal hooks in an unspecified order. Use useAllValues if you need to do this.

Questions & Answers

Ask questions about this page here.