revise intro to state management

src/routes/_components/Tutorials.tsx

@@ -43,7 +43,7 @@ export const Tutorials = () => (
  title: 'State Management',
  href: '/state-management',
  caption:
- 'Learn how compound components can enhance parent-child communication beyond prop drilling.',
+ 'Learn to structure and maintain your state effectively.',
  icon: (
  <svg
  xmlns="http://www.w3.org/2000/svg"

src/routes/compound-component/index.mdx

@@ -1,7 +1,6 @@
-import { Columns, Message } from '@marigold/components';
+import { Message } from '@marigold/components';
 
-import { Block, Content } from '@/components/Container';
-import DemoLink from '@/components/DemoLink';
+import { Content } from '@/components/Container';
 import Preview from '@/components/Preview';
 
 import SelectExample from './_components/SelectExample';

src/routes/state-management/_components/CounterExample.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import {Button, MarigoldProvider, Stack} from '@marigold/components';
+import theme from '@marigold/theme-core';
+
+const MyButton = () => {
+ const [count, setCount] = useState(0);
+
+ function handleClick() {
+ setCount(count + 1);
+ }
+
+ return (
+ <Button onPress={handleClick} size='small'>
+ Clicked {count} times
+ </Button>
+ );
+}
+
+const Counter = () => {
+ return (
+ <MarigoldProvider theme={theme}>
+ <div>
+ <MyButton />
+ </div>
+ </MarigoldProvider>
+ );
+}
+
+export default Counter;

src/routes/state-management/_components/counter-example.mdx

@@ -0,0 +1,38 @@
+import { Block } from '@/components/Container';
+
+<Block>
+ <CH.Scrollycoding>
+ ```tsx CounterExample.tsx focus=6
+ // from ./CounterExample.tsx
+ ````
+
+ ### Storing an initial value
+
+ Local state is typically initialized using the useState hook. This hook takes an initial state value as an argument and returns an array containing the current state and a function to update it.
+
+ **0** is the initial value for the count state on the first render.
+
+ ---
+
+ ```tsx CounterExample.tsx focus=14
+ // from ./CounterExample.tsx
+ ````
+
+ ### Reading the current state value
+
+ The current state value can be read directly from the state variable returned by useState. This state value can then be used in the component's JSX to dynamically render content.
+ This will display the current value of **count** in the UI.
+
+ ---
+
+ ```tsx CounterExample.tsx focus=9
+ // from ./CounterExample.tsx
+ ````
+
+ ### Updating a state value
+ To update the state, we use the state update function (in this case, **setCount**). This function takes the new state value as an argument and triggers a re-render of the component with the new state.
+
+ This function updates the **count** state by adding 1 to its current value.
+
+ </CH.Scrollycoding>
+</Block>

src/routes/state-management/index.lazy.tsx

@@ -1,12 +1,17 @@
 import { createLazyFileRoute } from '@tanstack/react-router';
 
-import { Block } from '@/components/Container';
 import Index from './index.mdx';
+import Title from '@/components/Title';
 
 export const Route = createLazyFileRoute('/state-management/')({
  component: () => (
- <Block>
- <Index />
- </Block>
+ <>
+ <Title
+ title="State Management"
+ caption="Learn to structure and maintain your state effectively."
+ image={{ url: '/floating-cogs.svg', size: '10%' }}
+ />
+ <Index />
+ </>
  ),
 });

src/routes/state-management/index.mdx

@@ -14,27 +14,32 @@ In React, **state refers to any data that represents the current behavior of an
 - Reading the current value
 - Updating a value
 
+React applications determine what UI to render based on the current state values. Thus, understanding when and how to use different techniques for managing state is a crucial skill for all React developers, as is deciding where a given piece of state should live.
+
+For a comprehensive approach to state management, it's important to consider:
+
+1. **Local State:** This is state that is managed within a single component. It's ideal for state that doesn't need to be shared across multiple components.
+2. **Global State:** This is state that needs to be accessible by multiple components throughout the application. Tools like Context API or Redux can be used to manage global state.
+3. **Server Cache:** This involves state that represents data fetched from a server. Unlike UI state, server cache should be managed differently, often using tools like React Query or SWR to handle data fetching, caching, and synchronization with the server.
+
+By effectively managing local state, global state, and server cache, you can create a React application that is both efficient and easy to maintain.
+
+### Using local state
+
+Local state in React is the state that is confined to a single component. It's ideal for managing data that doesn't need to be shared across multiple components.
+
+In the following example we have a component which counts the clicks on the button.
 <Preview>
  <Counter />
 </Preview>
 
-Let's have a look how the code looks like.
+Here's a detailed explanation of how to use local state in React:
 </Content>
 
 <CounterExampleDoc />
 
 <Content>
 
-React applications determine what UI to render based on the current state values. Thus, understanding when and how to use different techniques for managing state is a crucial skill for all React developers, as is deciding where a given piece of state should live.
-
-For a comprehensive approach to state management, it's important to consider:
-
-1. **Local State:** This is state that is managed within a single component. It's ideal for state that doesn't need to be shared across multiple components.
-2. **Global State:** This is state that needs to be accessible by multiple components throughout the application. Tools like Redux or Context API can be used to manage global state.
-3. **Server Cache:** This involves state that represents data fetched from a server. Unlike UI state, server cache should be managed differently, often using tools like React Query or SWR to handle data fetching, caching, and synchronization with the server.
-
-By effectively managing local state, global state, and server cache, you can create a React application that is both efficient and easy to maintain.
-
 ### Let's break down the state management code example:
 
 <DemoLink to="/state-management/preview">View Demo</DemoLink>