Skip to content

Commit b493fec

Browse files
sudheerjsudheerj
committed
Added shopping cart app
1 parent fba920c commit b493fec

57 files changed

Lines changed: 4195 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,7 @@ Hide/Show table of contents
384384
| 326 | [What is the React Compiler (React Forget)?](#what-is-the-react-compiler-react-forget) |
385385
| 327 | [What is Streaming SSR and how does React 18+ improve it?](#what-is-streaming-ssr-and-how-does-react-18-improve-it) |
386386
| 328 | [What is `renderToPipeableStream` and how is it different from renderToString?](#what-is-rendertopipeablestream-and-how-is-it-different-from-rendertostring) |
387+
| 329 | [What is the difference between HOCs and Hooks?](#what-is-the-difference-between-hocs-and-hooks) |
387388

388389
</details>
389390

@@ -9288,6 +9289,54 @@ Technically it is possible to write nested function components but it is not sug
92889289

92899290
In practice, prefer `renderToPipeableStream` for React 18+ SSR because it improves perceived performance and works naturally with Suspense-driven progressive loading.
92909291

9292+
**[⬆ Back to Top](#table-of-contents)**
9293+
9294+
329. ### What is the difference between HOCs and Hooks?
9295+
9296+
Both **Higher-Order Components (HOCs)** and **Hooks** let you reuse logic across components, but they solve that problem in very different ways.
9297+
9298+
| Aspect | Higher-Order Components (HOCs) | Hooks |
9299+
| --- | --- | --- |
9300+
| Pattern | A function that takes a component and returns a new, enhanced component | A function called directly inside a function component |
9301+
| Component tree | Adds an extra wrapper component, which can lead to "wrapper hell" with multiple HOCs | Adds no extra components to the tree |
9302+
| Sharing logic | Injects props/behavior into the wrapped component | Shares stateful logic directly via custom hooks (`useX`) |
9303+
| Prop handling | Can cause prop name collisions when composing multiple HOCs | No prop collisions since state lives inside the component itself |
9304+
| Debugging | Harder to trace which HOC injected which prop (often needs `displayName`) | Easier to trace; shows up as plain hook calls in React DevTools |
9305+
| Usage | Works with both class and function components | Can only be used in function components (or other hooks) |
9306+
9307+
#### Example: sharing "toggle" logic
9308+
9309+
**Using a HOC:**
9310+
9311+
```jsx
9312+
function withToggle(WrappedComponent) {
9313+
return function Enhanced(props) {
9314+
const [on, setOn] = useState(false);
9315+
const toggle = () => setOn((prev) => !prev);
9316+
return <WrappedComponent {...props} on={on} toggle={toggle} />;
9317+
};
9318+
}
9319+
9320+
const Modal = withToggle(BaseModal);
9321+
```
9322+
9323+
**Using a custom Hook:**
9324+
9325+
```jsx
9326+
function useToggle(initial = false) {
9327+
const [on, setOn] = useState(initial);
9328+
const toggle = () => setOn((prev) => !prev);
9329+
return [on, toggle];
9330+
}
9331+
9332+
function Modal() {
9333+
const [on, toggle] = useToggle();
9334+
// ...
9335+
}
9336+
```
9337+
9338+
In short, Hooks were introduced to solve the same logic-reuse problem as HOCs (and render props), but without adding extra components to the render tree—avoiding wrapper hell and making the code easier to read, type, and debug. See also [Do Hooks replace render props and higher-order components?](#do-hooks-replace-render-props-and-higher-order-components).
9339+
92919340
## Old Q&A
92929341

92939342
0. ### What is Concurrent Rendering? (Legacy)

‎coding-exercise/hooks/index.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
6+
<title>Senior React Hooks</title>
7+
8+
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
9+
10+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
11+
12+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
13+
</head>
14+
15+
<body>
16+
17+
<h1>Senior React Hooks</h1>
18+
19+
<div id="root01"></div>
20+
<hr>
21+
22+
<div id="root02"></div>
23+
<hr>
24+
25+
<div id="root03"></div>
26+
<hr>
27+
28+
<div id="root04"></div>
29+
<hr>
30+
31+
<div id="root05"></div>
32+
<hr>
33+
34+
<div id="root06"></div>
35+
36+
37+
<!-- 01 -->
38+
<script
39+
type="text/babel"
40+
data-presets="typescript,react"
41+
src="./01-usePrevious/usePrevious.ts">
42+
</script>
43+
44+
<script
45+
type="text/babel"
46+
data-presets="typescript,react"
47+
src="./01-usePrevious/App.tsx">
48+
</script>
49+
50+
51+
<!-- 02 -->
52+
<script
53+
type="text/babel"
54+
data-presets="typescript,react"
55+
src="./02-useDebounce/useDebounce.ts">
56+
</script>
57+
58+
<script
59+
type="text/babel"
60+
data-presets="typescript,react"
61+
src="./02-useDebounce/App.tsx">
62+
</script>
63+
64+
65+
<!-- 03 -->
66+
<script
67+
type="text/babel"
68+
data-presets="typescript,react"
69+
src="./03-useToggle/useToggle.ts">
70+
</script>
71+
72+
<script
73+
type="text/babel"
74+
data-presets="typescript,react"
75+
src="./03-useToggle/App.tsx">
76+
</script>
77+
78+
79+
<!-- 04 -->
80+
<script
81+
type="text/babel"
82+
data-presets="typescript,react"
83+
src="./04-useInterval/useInterval.ts">
84+
</script>
85+
86+
<script
87+
type="text/babel"
88+
data-presets="typescript,react"
89+
src="./04-useInterval/App.tsx">
90+
</script>
91+
92+
93+
<!-- 05 -->
94+
<script
95+
type="text/babel"
96+
data-presets="typescript,react"
97+
src="./05-useLocalStorage/useLocalStorage.ts">
98+
</script>
99+
100+
<script
101+
type="text/babel"
102+
data-presets="typescript,react"
103+
src="./05-useLocalStorage/App.tsx">
104+
</script>
105+
106+
107+
<!-- 06 -->
108+
<script
109+
type="text/babel"
110+
data-presets="typescript,react"
111+
src="./06-useFetch/useFetch.ts">
112+
</script>
113+
114+
<script
115+
type="text/babel"
116+
data-presets="typescript,react"
117+
src="./06-useFetch/App.tsx">
118+
</script>
119+
120+
</body>
121+
</html>

‎coding-hooks/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎coding-hooks/.oxlintrc.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"$schema": "./node_modules/oxlint/configuration_schema.json",
3+
"plugins": ["react", "typescript", "oxc"],
4+
"rules": {
5+
"react/rules-of-hooks": "error",
6+
"react/only-export-components": ["warn", { "allowConstantExport": true }]
7+
}
8+
}

‎coding-hooks/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
9+
10+
## React Compiler
11+
12+
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13+
14+
## Expanding the Oxlint configuration
15+
16+
If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
17+
18+
```json
19+
{
20+
"$schema": "./node_modules/oxlint/configuration_schema.json",
21+
"plugins": ["react", "typescript", "oxc"],
22+
"options": {
23+
"typeAware": true
24+
},
25+
"rules": {
26+
"react/rules-of-hooks": "error",
27+
"react/only-export-components": ["warn", { "allowConstantExport": true }]
28+
}
29+
}
30+
```
31+
32+
See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.

‎coding-hooks/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>coding-hooks</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)