Skip to content

Commit

Permalink
Merge pull request #147 from y-hsgw/update-performance-and-state-mana…
Browse files Browse the repository at this point in the history
…gement-links

Update state-management.md and performance.md old React documentation links
  • Loading branch information
alan2207 authored Feb 29, 2024
2 parents d0cae77 + e14092b commit c2a42cb
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const [state, setState] = React.useState(() => myExpensiveFn());

- If you develop an application that requires the state to track many elements at once, you might consider state management libraries with atomic updates such as [recoil](https://recoiljs.org/) or [jotai](https://jotai.pmnd.rs/).

- Use React Context wisely. React Context is good for low-velocity data like themes, user data, small local state etc. While dealing with medium-velocity/high-velocity data, you may consider using the [use-context-selector](https://github.com/dai-shi/use-context-selector) library that supports selectors (selectors are already built-in in most popular state management libraries like [zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) or [jotai](https://jotai.org/)). Important to remember, many times context is used as the "golden tool" for props drilling, whereas in many scenarios you may satisfy your needs by [lifting the state up](https://reactjs.org/docs/lifting-state-up.html) or [a proper composition of components](https://reactjs.org/docs/context.html#before-you-use-context). Do not rush with context.
- Use React Context wisely. React Context is good for low-velocity data like themes, user data, small local state etc. While dealing with medium-velocity/high-velocity data, you may consider using the [use-context-selector](https://github.com/dai-shi/use-context-selector) library that supports selectors (selectors are already built-in in most popular state management libraries like [zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) or [jotai](https://jotai.org/)). Important to remember, many times context is used as the "golden tool" for props drilling, whereas in many scenarios you may satisfy your needs by [lifting the state up](https://react.dev/learn/sharing-state-between-components#lifting-state-up-by-example) or [a proper composition of components](https://react.dev/learn/passing-data-deeply-with-context#before-you-use-context). Do not rush with context.

- If your application is expected to have frequent updates that might affect performance, consider switching from runtime styling solutions ([Chakra UI](https://chakra-ui.com/), [emotion](https://emotion.sh/docs/introduction), [styled-components](https://styled-components.com/) that generate styles during runtime) to zero runtime styling solutions ([tailwind](https://tailwindcss.com/), [linaria](https://github.com/callstack/linaria), [vanilla-extract](https://github.com/seek-oss/vanilla-extract), [CSS modules](https://github.com/css-modules/css-modules) which generate styles during build time).

Expand Down
2 changes: 1 addition & 1 deletion docs/state-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Good Server Cache Libraries:

This is a state that tracks users inputs in a form.

Forms in React can be [controlled](https://reactjs.org/docs/forms.html#controlled-components) and [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html).
Forms in React can be [controlled and uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).

Depending on the application needs, they might be pretty complex with many different fields which require validation.

Expand Down

0 comments on commit c2a42cb

Please sign in to comment.