| title | description | canonical |
|---|---|---|
Context | Details about Context in ReScript and React | /docs/react/latest/context |
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
Note: In ReScript, passing down props is way simpler than in TS / JS due to its JSX prop punning feature and strong type inference, so it's often preferrable to keep it simple and just do props passing. Less magic means more transparency!
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the Button component:
<CodeTab labels={["ReScript", "JS Output"]}>
// src/App.restypetheme=Light | DarkmoduleButton= { @react.componentletmake= (~theme) => { letclassName=switchtheme { | Light=>"theme-light" | Dark=>"theme-black" } <buttonclassName> {React.string("Click me")} </button> } } moduleThemedButton= { @react.componentletmake= (~theme) => { <Buttontheme /> } } moduleToolbar= { @react.componentletmake= (~theme) => { <div> <ThemedButtontheme/> </div> } } @react.componentletmake= () => { // We define the theme in the// toplevel App component and// pass it down <Toolbartheme=Dark/> }functionButton(props){varclassName=props.theme ? "theme-black" : "theme-light";returnReact.createElement("button",{className: className},"Click me");}functionThemedButton(props){returnReact.createElement(App$Button,{theme: props.theme});}functionToolbar(props){returnReact.createElement("div",undefined,React.createElement(App$ThemedButton,{theme: props.theme}));}functionApp(props){returnReact.createElement(App$Toolbar,{theme: /* Dark */1});}Using context, we can avoid passing props through intermediate elements:
<CodeTab labels={["ReScript", "JS Output"]}>
// src/App.resmoduleThemeContext= { typetheme=Light | Darkletcontext=React.createContext(Light) moduleProvider= { letmake=React.Context.provider(context) } } moduleButton= { @react.componentletmake= (~theme) => { letclassName=switchtheme { | ThemeContext.Light=>"theme-light" | Dark=>"theme-black" } <buttonclassName> {React.string("Click me")} </button> } } moduleThemedButton= { @react.componentletmake= () => { lettheme=React.useContext(ThemeContext.context) <Buttontheme /> } } moduleToolbar= { @react.componentletmake= () => { <div> <ThemedButton /> </div> } } @react.componentletmake= () => { <ThemeContext.Providervalue=ThemeContext.Dark> <div> <Toolbar /> </div> </ThemeContext.Provider> }varcontext=React.createContext(/* Light */0);varmake=context.Provider;varProvider={make: make};varThemeContext={context: context,Provider: Provider};functionApp$Button(props){varclassName=props.theme ? "theme-black" : "theme-light";returnReact.createElement("button",{className: className},"Click me");}varButton={make: App$Button};functionApp$ThemedButton(props){vartheme=React.useContext(context);returnReact.createElement(App$Button,{theme: theme});}varThemedButton={make: App$ThemedButton};functionApp$Toolbar(props){returnReact.createElement("div",undefined,React.createElement(App$ThemedButton,{}));}varToolbar={make: App$Toolbar};functionApp(props){returnReact.createElement(make,{value: /* Dark */1,children: React.createElement("div",undefined,React.createElement(App$Toolbar,{}))});}