From 3c84bbce52fcb828e23f559e8a76ab81a970b6d8 Mon Sep 17 00:00:00 2001 From: aromko Date: Wed, 3 Jul 2024 16:07:24 +0200 Subject: [PATCH] revise intro to state management --- public/floating-cogs.svg | 3 ++ src/routes/_components/Tutorials.tsx | 2 +- src/routes/compound-component/index.mdx | 5 +-- .../_components/CounterExample.tsx | 29 ++++++++++++++ .../_components/counter-example.mdx | 38 +++++++++++++++++++ src/routes/state-management/index.lazy.tsx | 13 +++++-- src/routes/state-management/index.mdx | 27 +++++++------ 7 files changed, 98 insertions(+), 19 deletions(-) create mode 100644 public/floating-cogs.svg create mode 100644 src/routes/state-management/_components/CounterExample.tsx create mode 100644 src/routes/state-management/_components/counter-example.mdx diff --git a/public/floating-cogs.svg b/public/floating-cogs.svg new file mode 100644 index 0000000..f7419d9 --- /dev/null +++ b/public/floating-cogs.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/routes/_components/Tutorials.tsx b/src/routes/_components/Tutorials.tsx index 586001d..d3956dd 100644 --- a/src/routes/_components/Tutorials.tsx +++ b/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: ( { + const [count, setCount] = useState(0); + + function handleClick() { + setCount(count + 1); + } + + return ( + + ); +} + +const Counter = () => { + return ( + +
+ +
+ + ); +} + +export default Counter; \ No newline at end of file diff --git a/src/routes/state-management/_components/counter-example.mdx b/src/routes/state-management/_components/counter-example.mdx new file mode 100644 index 0000000..4ec9642 --- /dev/null +++ b/src/routes/state-management/_components/counter-example.mdx @@ -0,0 +1,38 @@ +import { Block } from '@/components/Container'; + + + + ```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. + + + \ No newline at end of file diff --git a/src/routes/state-management/index.lazy.tsx b/src/routes/state-management/index.lazy.tsx index 891833a..990b549 100644 --- a/src/routes/state-management/index.lazy.tsx +++ b/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: () => ( - - - + <> + + <Index /> + </> ), }); diff --git a/src/routes/state-management/index.mdx b/src/routes/state-management/index.mdx index 5a406e1..124abb6 100644 --- a/src/routes/state-management/index.mdx +++ b/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>