Nice to meet you, Pro. Today, I want to share some contents from the React Conference 2024 that took place recently. I have now organized the information. There were many sessions, and the ones with a black border were from external speakers, not Meta employees. They covered various topics. Also, in this video, I inserted many screens related to today's content from the conference. Detailed sessions are listed at the bottom right, so you can check the titles there. The first thing I noticed is that React's popularity is still strong. The download numbers remain high, and people are learning to code with React. Many libraries are still available, showing that React is growing well. In conclusion, React is still evolving in terms of UX and UI design.

Things were easily noticeable, and it is considered that the development direction is very good. With the release of React 19, when we look at these changes in detail, we can use things like React Port in React. Then, using preload and such, it became easier to express high-priority things directly in components. Previously, we used forward to reference child nodes, but now it seems that it will be easier to pass props directly. It is said that handling pending and such processes is complex, and to lower the priority of certain tasks in order not to block users. In fact, in React 18, there was the useTransition. Nevertheless, some data change operations were managed separately, but it seems that all these things are a bit more integrated now.

Through the action states function, tasks that need to be integrated and sent to the server are expressed here using the async function. The data is also returned without separate state management, and in the process, it confirms whether it is a pending state during communication with the server. By utilizing that, you can add things you want to do. The important thing is the action, not the form of the server URL. This function refers to that. When you call the function returned here, the task progresses, and you can immediately utilize the state result accordingly. You requested something through the endpoint and such tasks can be replaced by this. It is said that the amount of code before and after the task is greatly reduced. By using hooks like this, the code is reduced a bit. And you get a response from the server.

When you want to show the rendering result from the client first without waiting, it's called optimistic update. You can use User Optimistic. Next, when the child node is communicating with the server as a form action, you want to express something like Oh, it's in progress. You use Form Status. This is about React Server Components. It continuously sends the results processed by the server to the client's stream. Then, the client partially renders it as it receives it, and these tasks are now very naturally integrated. You should study server components a bit. It's a concept where a single task is divided between the server and the client. This is what Mr. Den Ephraim talks a lot about. He's not on the React team now, but when you say this gentleman, is it okay to refer to him like that? This is what this person mentioned.

In the topic called React 4 2 Computer, when we look at the subject, it is a single task, but it is something that the server can do quickly and the client can receive and process. Actually, this is the payload that is delivered to the client after the server works. After the server works, the code naturally operates on the client side. It's like connecting through a door, as I mentioned in the past. So, I vaguely remember talking about door-to-door. In the past, we used to put data communication in useEffect and handle tasks like loading, which were quite cumbersome to handle on the client side. On the top right, there is server code, and below is the client component. Therefore, the tasks are divided into server components and client components. Then, if the task processed on the server is promise-based results, then...

The client receives the promise, then receives the data, and now needs to render the component, right? At that time, functions that can easily receive promises are provided by the React team. UseEffect function is provided by the React team. The useEffect function can receive not only promises but also contexts. Instead of useContext, you can use useEffect. For server actions, as I mentioned earlier, you can put a function in the form action. Now, you can also put a function that works on the server. React server components show a lot of mixed code of client and server. Here is the server component code. What is below? There is a client component. Then, in the client component, you put the code in the server component in the action. If you put it, when the client component performs the form action, it receives that promise and the.

When you call a function, the client takes action, then the server code runs directly. You need to give input, receive the result, and then the client uses various methods. In this process, by utilizing what was previously mentioned, like useTransition, useActionStage, useFormStatus, you can provide a seamless experience to the users. All of these can be seen as an example code where the server and client progress as one, a bit separated, React compiler has appeared. The compiler seems quite amazing. In version 19, it is now provided as an experimental version through the Babel plugin. By analyzing the code like on the left, we can imagine that the React compiler creates this kind of code. By incorporating useMemo, it now helps with caching. Actually, by utilizing this useMemo cache line, it helps with the caching process.

The code determines whether it will become a dependency or a cache, and now it is said that such tasks are done, like discovering such things and deciding whether to maintain the cache or not. Therefore, as the data that changes is structurally passed to React components, it tracks the values, so rather than using useMemo, there are useMemo or React.memo, right? It is said that the React compiler reduces the code size and optimizes it in a more optimized state than unnecessary squares or things like that, rather eliminating them and putting them well into what is needed. It's not necessarily that it's a certain percentage, but it will be like analyzing a site like Instagram. If you look at Day 2, there is a React compiler dive. Those who make Babel plugins know well, but I don't know well.

The Babel plugin is a kind of compiler. So, after tokenizing and analyzing the code, it generates a new code by replacing it based on the results. For example, it analyzes the code to see if memos are needed or not. If needed, it updates and replaces the code. When looking at the original code on the top right, it seems like a regular code, but after analyzing it, it recognizes that functions are being called and operations are in progress. Then, it applies the memoization and outputs it accordingly. Through this process, there was also a session where it was fascinating how the code evolved and changed. The React compiler optimizes rendering and reduces expensive computational tasks, providing a significant impact on UX and DX.

Now, the work I do is quite uncomfortable, and those tasks are quite inconvenient. I guess they will be done automatically, which will make development easier. So, there is a framework called Remix now. It is said that it can be used as a React router. What does this mean? In fact, the React router is now being developed by the Remix team. Moreover, Shopify seems to be managing the company that acquired it. Therefore, it seems like they are one family. When React Router version 7 is released, it seems like many of the existing Remix features will be integrated. Since React Router is widely used, many Remix features are already included in it. If you look at React Router, you can see that it contains many features that are similar to Next.js. It would be good to pay attention to this as well.

Today, I didn't watch the full 16-hour React conference, but I looked at some key points and shared my thoughts based on that. I think it would be helpful if it's beneficial, and if any of you have watched the video, please leave comments like reviews. I believe it would be even more helpful for many others watching the video. Thank you for watching.

React Conf 2024 정리 - 여전히 놀라운 리액트 !

코딩, 프로그래밍 함께 공부하고 배워요 😎

frongttv@gmail.com
