From 27eeef924f73e042f00d1b1352961416a0ec1ac5 Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Sat, 9 Nov 2024 14:34:38 +0100 Subject: [PATCH 1/2] Add order for react blogs --- .../posts/React/migrating-class-components-to-hooks-rules.mdx | 2 ++ .../docs/posts/React/migrating-class-components-to-hooks.mdx | 2 ++ src/content/docs/posts/React/react-refs-and-dom-references.mdx | 2 ++ src/content/docs/posts/React/responsive-design-in-react.mdx | 2 ++ 4 files changed, 8 insertions(+) diff --git a/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx b/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx index 0f36b6c..531b38e 100644 --- a/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx +++ b/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx @@ -3,6 +3,8 @@ title: "Migrating class components to hooks – rules" tags: ["react", "hooks", "migration"] created: 2020-08-18 lastUpdated: 2020-08-18 +sidebar: + order: 2 --- import LinkToPost from "@components/LinkToPost.astro"; diff --git a/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx b/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx index 7da4df5..6bf0e7d 100644 --- a/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx +++ b/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx @@ -4,6 +4,8 @@ tags: ["react", "hooks", "migration"] created: 2020-05-03 lastUpdated: 2020-05-03 image: /src/assets/react-responsive.png +sidebar: + order: 1 --- I've been working with React for some time (more than 3 years now) and when hooks came out, I was really eager to use it in order to simplify the code I was writing. diff --git a/src/content/docs/posts/React/react-refs-and-dom-references.mdx b/src/content/docs/posts/React/react-refs-and-dom-references.mdx index d8d7a75..717bbff 100644 --- a/src/content/docs/posts/React/react-refs-and-dom-references.mdx +++ b/src/content/docs/posts/React/react-refs-and-dom-references.mdx @@ -3,6 +3,8 @@ title: "React refs and dom references" tags: ["react", "refs", "dom"] created: 2020-08-21 lastUpdated: 2020-08-21 +sidebar: + order: 3 --- ## Introduction diff --git a/src/content/docs/posts/React/responsive-design-in-react.mdx b/src/content/docs/posts/React/responsive-design-in-react.mdx index c3a7c5b..3cd9b95 100644 --- a/src/content/docs/posts/React/responsive-design-in-react.mdx +++ b/src/content/docs/posts/React/responsive-design-in-react.mdx @@ -3,6 +3,8 @@ title: "Responsive design in React" tags: ["react", "responsive", "breakpoints"] created: 2021-05-09 lastUpdated: 2021-05-09 +sidebar: + order: 4 --- import LinkToPost from "@components/LinkToPost.astro"; -- 2.51.2 From 719c66f7d9103b1b1c899f569bbca7db7995a2e5 Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Sat, 9 Nov 2024 15:07:57 +0100 Subject: [PATCH 2/2] Add 1st snippet for React --- .../post-react-life-cycles-and-timings/a.tsx | 98 +++++++++++++++++++ .../frame.module.css | 45 +++++++++ .../frame.tsx | 69 +++++++++++++ .../React/react-life-cycles-and-timings.mdx | 51 ++++++++++ 4 files changed, 263 insertions(+) create mode 100644 src/components/post-react-life-cycles-and-timings/a.tsx create mode 100644 src/components/post-react-life-cycles-and-timings/frame.module.css create mode 100644 src/components/post-react-life-cycles-and-timings/frame.tsx create mode 100644 src/content/docs/posts/React/react-life-cycles-and-timings.mdx diff --git a/src/components/post-react-life-cycles-and-timings/a.tsx b/src/components/post-react-life-cycles-and-timings/a.tsx new file mode 100644 index 0000000..32f7986 --- /dev/null +++ b/src/components/post-react-life-cycles-and-timings/a.tsx @@ -0,0 +1,98 @@ +import * as React from "react"; + +import { createFrame } from "./frame"; + +const { console, useConsole, Frame } = createFrame(); + +// --- + +function Component() { + const { console, setNode } = useConsole(); + + console.log("render"); + + React.useLayoutEffect(() => { + console.log("useLayoutEffect"); + return () => { + console.log("useLayoutEffect cleanup"); + }; + }); + + React.useEffect(() => { + console.log("useEffect"); + return () => { + console.log("useEffect cleanup"); + }; + }); + + return ( +
{ + setNode(node); + console.log("ref"); + }} + > + Hello +
+ ); +} + +// --- + +export function A() { + const [state, setState] = React.useState>( + null + ); + + return ( + +
+ + + + + +
+ +
+ {state ? : null} +
+ + ); +} diff --git a/src/components/post-react-life-cycles-and-timings/frame.module.css b/src/components/post-react-life-cycles-and-timings/frame.module.css new file mode 100644 index 0000000..e013714 --- /dev/null +++ b/src/components/post-react-life-cycles-and-timings/frame.module.css @@ -0,0 +1,45 @@ +.frame { + display: grid; + grid-template-columns: 1fr 1fr; + margin-top: 1rem; +} + +@media screen and (max-width: 590px) { + .frame { + grid-template-columns: 1fr; + } +} + +.window { + border: 1px solid var(--sl-color-gray-5); +} + +.console[class] { + margin-top: 0; + background: var(--sl-color-gray-7); +} +@media screen and (min-width: 591px) { + .console[class] { + border-left: none; + } +} +@media screen and (max-width: 590px) { + .console[class] { + border-top: none; + } +} + +.log[class] { + margin-top: 0; +} + +.log-separator[class] { + margin-block: 0.3rem; + margin-inline: -0.3rem; + border-bottom-color: var(--sl-color-gray-5); +} + +.clear-console { + color: var(--sl-color-gray-4); + font-style: italic; +} diff --git a/src/components/post-react-life-cycles-and-timings/frame.tsx b/src/components/post-react-life-cycles-and-timings/frame.tsx new file mode 100644 index 0000000..5151d5b --- /dev/null +++ b/src/components/post-react-life-cycles-and-timings/frame.tsx @@ -0,0 +1,69 @@ +import * as React from "react"; + +import classes from "./frame.module.css"; + +export const createFrame = () => { + const console = { log: (...messages: string[]) => {}, clear: () => {} }; + + const Logs = () => { + const [logs, setLogs] = React.useState([]); + + console.log = (...messages: string[]) => { + React.startTransition(() => + setLogs((logs) => [...logs, messages.join(" ")]) + ); + }; + + console.clear = () => { + React.startTransition(() => + setLogs([ + Console was cleared, + ]) + ); + }; + + return ( + 
+        
+          {logs.map((log, index) => (
+            <>
+              {index !== 0 ? 
 : null}
+              
{log}

+            
+          ))}
+        
+
+ ); + }; + + const Frame = ({ children }: { children: React.ReactNode }) => { + return ( +
+
{children}
+ + +
+ ); + }; + + const useConsole = () => { + const ref = React.useRef(null); + const getRef = () => (ref.current ? "node" : "null"); + + return { + console: { + clear: () => console.clear(), + log: (...messages: string[]) => console.log(...messages, getRef()), + }, + setNode: (node: HTMLDivElement | null) => { + ref.current = node; + }, + }; + }; + + return { + console, + useConsole, + Frame, + }; +}; diff --git a/src/content/docs/posts/React/react-life-cycles-and-timings.mdx b/src/content/docs/posts/React/react-life-cycles-and-timings.mdx new file mode 100644 index 0000000..c48fd50 --- /dev/null +++ b/src/content/docs/posts/React/react-life-cycles-and-timings.mdx @@ -0,0 +1,51 @@ +--- +title: "React life-cycles & timings" +tags: ["lifecycle", "task", "async"] +created: 2024-11-07 +lastUpdated: 2024-11-07 +sidebar: + order: 5 + hidden: true +pagefind: false +--- + +:::caution[Warning] +Still in draft +::: + +Hello, I’m Ayc0 👋. I started coding in React in 2016, around the [v15.3.1](https://www.npmjs.com/package/react/v/15.3.1) (which is around {new Date().getFullYear() - 2016} years ago!). I’m the maintainer of [`@blocz/react-responsive`](https://www.npmjs.com/package/@blocz/react-responsive), did a few open-source contributions, and have been working professionally with React for also a few years. + +Why am I saying this? I do not consider myself bad with React (not the best either 🙈). But even after so many years spent working with it, there are a lot of elements that I never truly understood, nor even really questioned before. + +This article will be about all of those elements 😅 + +### Disclaimer + +- Everything I will present in this article is based on my understanding & findings while playing with React.\ + So not everything may be 100% accurate, +- All of those could change in new versions of React, already have changed actually in the past (which is a good thing). + +I’ll be using the latest version of the time of writing, being the v18.x.x. + +You can find all those experiments on https://ayc0.github.io/react-timings/. \ +And the source code is available in my [GitHub](https://github.com/Ayc0/ayc0.github.io/tree/0a265b6/src/components/page-react-timings). + +## Life-cycles + +First question we need answering: in which order are life cycles called? + +:::note[Note] +The concept of lifecycle in React is classically associated with class components: methods like `componentDidMount`, etc. + +I’ll also use this name to refer to hooks provided by React, such as `useEffect` (for simplicity). +::: + +To measure this, we can use a code snippet like such: + +import { Code } from "@astrojs/starlight/components"; +import aRaw from "@components/post-react-life-cycles-and-timings/a.tsx?raw"; +import { A } from "@components/post-react-life-cycles-and-timings/a.tsx"; + + + + -- 2.51.2