LiveReact

Advanced

React Context

Share state between components without prop drilling

  • context
  • local state

Key concepts

count is a server prop, assigned on the LiveView exactly like the Counter example. React's own createContext/useContext then shares that value with a nested component with no prop passed between them — the two mechanisms compose, they don't conflict.

10

How it works

Context wraps its children in a CountContext.Provider whose value is the server-owned count prop. Any component inside that tree — however deeply nested — can call useContext(CountContext) to read it, without every component in between having to accept and forward a count prop it doesn't otherwise need.

Clicking a button still calls pushEvent("set_count", …), which reaches handle_event/3 and reassigns count on the server, same as Counter — context describes how a value moves around inside React, not where it comes from.