After my talk at
#ReactConf
, I got a question about displaying a "retry" rather than removing the optimistic messages. I made a branch with an example of this, hopefully whoever asked sees this 😅
I had such a fantastic time at
#ReactConf
. It has been wonderful hearing so many React and web related conversations between great people. What an amazing community!
Thank you
@mattcarrollcode
for a great speaker experience, and the meta team for reviewing my talk before the
In a couple of weeks, I will be speaking at React Conf about RSC! Thrilled to do another live coding session.
Free tickets to the live stream are available :)
Looking back at the past months and what I’ve been able to achieve recently, I want to thank my biggest supporter and partner
@DevlinDuldulao
for always motivating me and inspiring me to keep chasing my goals. I would not be here without you. 💞
In this talk, we'll explore with
@aurorascharff
the application of RSC to elevate the functionality and efficiency of forms. Also, we’ll learn the latest advancements in React 19 and the introduction of multiple new hooks.
#ReactAlicante2024
A common misconception is that the React Compiler is a part of React 19. As great as that would be, it is not. "React Compiler is a new experimental compiler that we’ve open-sourced to get early feedback from the community." See the React RC blog post for an overview of what is
While preparing for my talk at
#reactparis
next month I’m so thankful for the updated React docs! The explanations on useFormStatus, useOptimistic etc. are really thorough and the examples and interactive demos are great :) Thanks, React team!
The React docs say that "Server Actions should be called in a transition." However, the Next.js docs say to use useTransition if you want to show a pending state, and have examples without transitions around the server action call. What is the correct way here?
@webdevcody
The fact that useformstatus needs a separate component is a good thing. It lets you throw your submit button into any server code and have the loading state just work. I wrote a blog post discussing this:
For the other use case you can use the pending
I will post some pictures from
@DevoxxUK
conference with speaker friends as all of us having such an amazing time! ❤️ Plus, connecting and networking with speakers/attendees is one of my fave parts of conferences. 🙌🙌 And you can see that we very much approve of
#DevoxxUK
👍👍
🌍✨ And we start our launch week with the most Exciting news! Join us for
#ReactAfrica
on November 29th in the vibrant city of Casablanca, Morocco! 🚀 Connect with the brightest minds in React and explore new frontiers in web development. Save the date!
#ReactAfrica2024
🎉🌟
I'm seeing a lot of content pushing the use(fetch(...)) as a replacement for useEffect fetching. The React docs specifically say that this is not the intended way!
"Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a
It's amazing every time I see
@aurorascharff
talking about the RSC. It's great to see how easy the concept of RSC is to understand.
One of my favorite talks at React Conf 2024.
Solved a fun problem with RSC!
An interactive chat weaving server and client. The component is wrapped in an interactive container for open/close, the messages are fetched async and rendered as server components, the new message is submitted using server actions, and a
Recently, I've started creating vlogs for every tech conference I attend or speak at, and this time it's all about
#ReactParis
from March 22.
🍿
Discover my speaking adventure and live the experience through my lens in this latest vlog.
Thanks for having me thegeekconf ❤️ For those of you who saw my React Conf talk, I added an additional feature here since that time with useFormStatus 🤭
With
@aurorascharff
, gain insights into optimizing server-side rendering, enhancing application interactivity through Server Actions, and mastering form creation for robust data handling and validation. 🤩
#ReactAlicante
#reactjs
I've been featured in Norway's developer-focused online newspaper,
@kode24no
🥳
In the article, I talk about my day-to-day tasks and my experience with speaking at conferences.
Super-useful library for typing next's untyped route params and search params. Migrated to it, and managing state in the URL has been a breeze since! Thank you
@lukemorales
I replicated the Remix tutorial "Remix Contacts" in Next.js. Check out my blog post where I discuss the process, differences, and problems encountered. The full code is also linked.
#nextjs
#remix
#rsc
"The biggest change to our implementation is implementing the fetch patch that was removed from React: b59541d (
#65058
)"
Does this mean that as a Next.js dev, you aren't affected by the React change and still have your fetches automatically memoized?
This is so good! Great examples for understanding transitions!! I also appreciate the explanation on Next.js not exposing router events and the composition reasoning, something I've been wondering about myself recently.
✍️ New post: "Global progress in Next.js"
Learn all about React Transitions, play with tons of interactive demos, and see how even something like a global progress bar can benefit from composability!
The RSC queen 👸 at
#NDCOslo
is currently talking about the 🍩 pattern for nesting server and client components in React. I'm gonna grab a donut after this cuz I'm hungry now 🤤. 😅
Giving away a ticket to
#KongresNextJS
in Warsaw, Poland, a framework focused conference! Reply to this tweet if you want to go there and I’ll select one randomly and dm you ☺️
The docs however push the useFormStatus approach above the old ways which seems to confuse a lot of people. I could be wrong about this topic, maybe the functionality is just not fully developed yet. (3/3)
The NDC Sydney 2024 agenda is out, and the agenda is packed with amazing speakers! See the full agenda and get your Early Bird tickets before 10 November.
#ndcsydney
I've been struggling with the practicality of useOptimistic when working across the component tree, especially when working across layouts and pages since you can't pass props. I found a solution now - a provider. Wrote a post about it. Objections welcome.
A thread 🧵: Thoughts on useFormStatus/State and the action property. It’s not the new “gold standard” for forms. It’s a way to solve a problem that wasn’t being solved previously - providing a form with pending states and errors without relying on JS to make it work. (1/3)
Still, there's lots of content trying to turn the "use" hook into this new way to fetch data on the client side. The React docs do not mention using it for that anywhere.
Devs can get very confused about the future of React when they are told the 20
@sebastienlorber
I would say though that for this app - which is built for Remix in terms of i.e the way it's displaying pending states - gives Remix a clear edge. The code could be simplified a lot if I did things the "Next.js way" instead, but the goal was to replicate the tutorial.
@tomus_sherman
@lubieowoce
I do this as well. But if you use react cache() around get data function (where you define the function) it only calls the function once anyway. It will be called once per-render.
You would want useFormStatus, for example, if you know your app will be used on slow devices or with low latency. It’s not meant to replace your interaction-heavy React Hook Forms when that’s the experience you’re after. (2/3)
In just two weeks, catch me at
#NDCPorto
sharing an introduction to and insights about React Server Components. I've been working with RSC in production for months - join my talk, ask questions, and dive into my real-world experiences!
@NDC_Conferences
#rsc
#nextjs
@ImSh4yy
My understanding is that you’re supposed to use cache(), which was was already available before this patch and could be used for example when getting data from a db rather than with fetch.
You still want to fetch data in your components, but now also consider whether you need
@borispoehland
Yeah, which is okay. However examples such as “onClick={async () => {
const updatedLikes = await incrementLike()
setLikes(updatedLikes)
}}” contradicts the React docs a bit since it’s not using a transition and not using form action.
@malloc007
I really appreciate that, thank you!
@YTCodeAntonio
has videos of really good in depth clones as well if you’re interested in learning more! And
@ByteGradCom
has a course but it’s paid.