Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New blog react 19 #9

Merged
merged 4 commits into from
Apr 28, 2024
Merged

New blog react 19 #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
351b824
RSS feeds updated
madole Apr 28, 2024
bc16616
Added: Links and descriptions to hooks
madole Apr 28, 2024
a63b665
Merge branch 'new-blog-react-19' of github.com:madole/madole.xyz-next…
madole Apr 28, 2024
d669e18
Added: RSS Feeds
madole Apr 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 15 additions & 0 deletions content/blog/a-quick-glance-at-the-react-19-beta-feature-set.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,25 @@ slug: 'a-quick-glance-at-the-react-19-beta-feature-set'

- Some spicy new hooks and a concept of async functions being "actions"
- `useTransition`
- a React Hook that lets you update the state without blocking the UI.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capitalise the first letter of the sentence for consistency and professionalism.

-        - a React Hook that lets you update the state without blocking the UI.
+        - A React Hook that lets you update the state without blocking the UI.
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
- a React Hook that lets you update the state without blocking the UI.
- A React Hook that lets you update the state without blocking the UI.

- `const [isPending, startTransition] = useTransition();`
- [https://react.dev/reference/react/useTransition](https://react.dev/reference/react/useTransition)
- `useOptimistic`
- a React Hook that lets you optimistically update the UI.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capitalise the first letter of the sentence and remove the extra space for consistency and professionalism.

-        -  a React Hook that lets you optimistically update the UI.
+        - A React Hook that lets you optimistically update the UI.
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
- a React Hook that lets you optimistically update the UI.
- A React Hook that lets you optimistically update the UI.

- `const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);`
- [https://react.dev/reference/react/useOptimistic](https://react.dev/reference/react/useOptimistic)
- `useActionState`
- a Hook that allows you to update state based on the result of a form action.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capitalise the first letter of the sentence for consistency and professionalism.

-        - a Hook that allows you to update state based on the result of a form action.
+        - A Hook that allows you to update state based on the result of a form action.
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
- a Hook that allows you to update state based on the result of a form action.
- A Hook that allows you to update state based on the result of a form action.

- `const [state, formAction] = useActionState(fn, initialState, permalink?);`
- [https://react.dev/reference/react/useActionState](https://react.dev/reference/react/useActionState)
- `useFormStatus`
- a Hook provides status information of the last form submission.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capitalise the first letter of the sentence for consistency and professionalism.

-        - a Hook provides status information of the last form submission.
+        - A Hook provides status information of the last form submission.
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
- a Hook provides status information of the last form submission.
- A Hook provides status information of the last form submission.

- `const { pending, data, method, action } = useFormStatus();`
- [https://react.dev/reference/react-dom/hooks/useFormStatus](https://react.dev/reference/react-dom/hooks/useFormStatus)
- `useDeferredValue`
- a React Hook that lets you defer updating a part of the UI.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capitalise the first letter of the sentence for consistency and professionalism.

-        - a React Hook that lets you defer updating a part of the UI.
+        - A React Hook that lets you defer updating a part of the UI.
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
- a React Hook that lets you defer updating a part of the UI.
- A React Hook that lets you defer updating a part of the UI.

- `const deferredValue = useDeferredValue(value);`
- [https://react.dev/reference/react/useDeferredValue](https://react.dev/reference/react/useDeferredValue)
- Actions can now be passed to `<form action={actionFunction}>`
- The `use` function - new API to read resources in render. Which is named like a hook but doesn't have the same conditional code issue hooks have, you can give it promises and contexts according to the post.
_Confusing at first glance, maybe it'll settle over time._
Expand Down
4 changes: 2 additions & 2 deletions public/rss.atom
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<feed xmlns="http://www.w3.org/2005/Atom">
<id>http://madole.xyz/</id>
<title>Madole.xyz Blog</title>
<updated>2024-04-28T05:27:13.207Z</updated>
<updated>2024-04-28T10:12:05.845Z</updated>
<generator>https://github.com/jpmonette/feed</generator>
<author>
<name>Andrew McDowell</name>
Expand All @@ -20,7 +20,7 @@
<id>https://madole.xyz/blog/a-quick-glance-at-the-react-19-beta-feature-set</id>
<link href="https://madole.xyz/blog/a-quick-glance-at-the-react-19-beta-feature-set"/>
<updated>2024-04-28T04:59:49.550Z</updated>
<summary type="html"><![CDATA[Reading time: 2 min read]]></summary>
<summary type="html"><![CDATA[Reading time: 3 min read]]></summary>
<content type="html"><![CDATA[<p> The React 19 Beta release is out and the accompanying <a href="https://react.dev/blog/2024/04/25/react-19">blog post</a> is a great read. Here&#39;s a quick glance at the
new features and improvements that are part of this release.</p>
<ul>
Expand Down
2 changes: 1 addition & 1 deletion public/rss.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"content_html": "<p> The React 19 Beta release is out and the accompanying <a href=\"https://react.dev/blog/2024/04/25/react-19\">blog post</a> is a great read. Here&#39;s a quick glance at the\n new features and improvements that are part of this release.</p>\n<ul>\n<li>Some spicy new hooks and a c</li>\n</ul>\n",
"url": "https://madole.xyz/blog/a-quick-glance-at-the-react-19-beta-feature-set",
"title": "A quick glance at the React 19 Beta feature set",
"summary": "Reading time: 2 min read",
"summary": "Reading time: 3 min read",
"date_modified": "2024-04-28T04:59:49.550Z",
"author": {
"name": "Andrew McDowell",
Expand Down
4 changes: 2 additions & 2 deletions public/rss.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<title>Madole.xyz Blog</title>
<link>http://madole.xyz/</link>
<description>Blog posts from madole.xyz</description>
<lastBuildDate>Sun, 28 Apr 2024 05:27:13 GMT</lastBuildDate>
<lastBuildDate>Sun, 28 Apr 2024 10:12:05 GMT</lastBuildDate>
<docs>https://validator.w3.org/feed/docs/rss2.html</docs>
<generator>https://github.com/jpmonette/feed</generator>
<language>en</language>
Expand All @@ -19,7 +19,7 @@
<link>https://madole.xyz/blog/a-quick-glance-at-the-react-19-beta-feature-set</link>
<guid>https://madole.xyz/blog/a-quick-glance-at-the-react-19-beta-feature-set</guid>
<pubDate>Sun, 28 Apr 2024 04:59:49 GMT</pubDate>
<description><![CDATA[Reading time: 2 min read]]></description>
<description><![CDATA[Reading time: 3 min read]]></description>
<content:encoded><![CDATA[<p> The React 19 Beta release is out and the accompanying <a href="https://react.dev/blog/2024/04/25/react-19">blog post</a> is a great read. Here&#39;s a quick glance at the
new features and improvements that are part of this release.</p>
<ul>
Expand Down