\(
\newcommand{\P}[]{\unicode{xB6}}
\newcommand{\AA}[]{\unicode{x212B}}
\newcommand{\empty}[]{\emptyset}
\newcommand{\O}[]{\emptyset}
\newcommand{\Alpha}[]{Α}
\newcommand{\Beta}[]{Β}
\newcommand{\Epsilon}[]{Ε}
\newcommand{\Iota}[]{Ι}
\newcommand{\Kappa}[]{Κ}
\newcommand{\Rho}[]{Ρ}
\newcommand{\Tau}[]{Τ}
\newcommand{\Zeta}[]{Ζ}
\newcommand{\Mu}[]{\unicode{x039C}}
\newcommand{\Chi}[]{Χ}
\newcommand{\Eta}[]{\unicode{x0397}}
\newcommand{\Nu}[]{\unicode{x039D}}
\newcommand{\Omicron}[]{\unicode{x039F}}
\DeclareMathOperator{\sgn}{sgn}
\def\oiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x222F}\,}{\unicode{x222F}}{\unicode{x222F}}{\unicode{x222F}}}\,}\nolimits}
\def\oiiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x2230}\,}{\unicode{x2230}}{\unicode{x2230}}{\unicode{x2230}}}\,}\nolimits}
\)
In declarative UI programming, you application code is the source of truth for all state. When the user interacts with your UI, events propagate from the UI to your application which updates the state. Once the state is updated, the UI is rerendered based on the new state. Like other declarative paradigms, the UI library will then perform diffs to reconcile the change in UI with the current UI. Since the application is the ground truth for state, any mismatched UI state will get replaced during the render pass.
The following UI libraries and frameworks use this type of programming:
- React
- Jetpack Compose
- Lit
Properties
Typically your UI will consist of several different components or composables.
State
- React - https://react.dev/reference/react/useState
- Lit - https://lit.dev/docs/components/properties/
Events
Effects
https://react.dev/learn/you-might-not-need-an-effect
