LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-07 21:07:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: finalize article

Browse Source
This commit is contained in:
Corbin Crutchley
2023-12-18 03:21:13 -08:00
parent 2ba14900e3
commit 06aeee3d96
7 changed files with 2513 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
content/blog/explaining-reacts-cache-function/index.md
View File

@@ -48,7 +48,7 @@ function App() {
}
```
<!-- TODO: Show broken example -->
<iframe data-frame-title="React Broken Basic Cache Usage - StackBlitz" src="uu-code:./react-broken-basic-cache-usage?template=node&embed=1&file=&file=src%2Fmain.jsx" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
Now traditional React rules would say that `alertCounter` should show an `alert` on every render, regardless of if `counter` is being changed or not. We can see this whenever we trigger a re-render manually without changing `counter`.
@@ -83,7 +83,7 @@ function App() {
Now if we force a re-render without changing `count`, it will no longer `alert`:
<!-- TODO: Show working example -->
<iframe data-frame-title="React Basic Cache Usage - StackBlitz" src="uu-code:./react-basic-cache-usage?template=node&embed=1&file=&file=src%2Fmain.jsx" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
This is because the `cache` function is [_memoizing_](https://whatthefuck.is/memoization) the usage of the function and eagerly opting out of execution as a result.
@@ -134,7 +134,7 @@ I personally don't find the first argument particularly compelling, so let's tak
Say that you're looking to generate a theme based on the users' input:
![// TODO: Write alt](./theme_preview.png)
![A primary color of purple is selected by the user with a green and pink secondary and tertiary colors. Each of the colors has a white or dark colored text to match legibility](./theme_preview.png)
> I didn't spend long optimizing how the theme would look for different color types. Admittedly, this doesn't look amazing, but it will suffice for the sake of a demo.
@@ -225,7 +225,7 @@ function ThemePreviewRow({ type, themeColor }) {
This allows us to avoid passing down the entire theme for each `ThemePreviewRow` components, instead relying on `cache`'s memoization to allow multiple components to access the values each.
<!-- TODO: Add code embed -->
<iframe data-frame-title="React Theme Cache - StackBlitz" src="uu-code:./react-theme-cache?template=node&embed=1&file=&file=src%2Fmain.jsx" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
# Other notable things about `cache`
@@ -332,6 +332,8 @@ function App = () => {
}
```
<iframe data-frame-title="React Cache Error - StackBlitz" src="uu-code:./react-cache-error?template=node&embed=1&file=&file=src%2Fmain.jsx" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
# Conclusion
This has been a fun look into an upcoming API from the React core team; `cache`!

24
content/blog/explaining-reacts-cache-function/react-broken-basic-cache-usage/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

9
content/blog/explaining-reacts-cache-function/react-broken-basic-cache-usage/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>React Basic Cache Usage</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

2426
content/blog/explaining-reacts-cache-function/react-broken-basic-cache-usage/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
content/blog/explaining-reacts-cache-function/react-broken-basic-cache-usage/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "@unicorn-utterances/react-basic-cache-usage",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "18.3.0-canary-0cdfef19b-20231211",
"react-dom": "18.3.0-canary-0cdfef19b-20231211"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.0.10"
}
}

23
content/blog/explaining-reacts-cache-function/react-broken-basic-cache-usage/src/main.jsx Normal file
View File

@@ -0,0 +1,23 @@
import { createRoot } from "react-dom/client";
import { useReducer, useState } from "react";
const alertCounter = (id) => {
alert(id);
};
function App() {
const [counter, setCounter] = useState(0);
const [_, rerender] = useReducer(() => ({}), {});
alertCounter(counter);
return (
<div>
<button onClick={() => setCounter((v) => v + 1)}>Add to {counter}</button>
<button onClick={rerender}>Rerender</button>
<input key={Math.floor(Math.random() * 10)} />
</div>
);
}
createRoot(document.getElementById("root")).render(<App />);

6
content/blog/explaining-reacts-cache-function/react-broken-basic-cache-usage/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});