Code Mosh React 18 Beginners Fco Better [ PREMIUM • CHECKLIST ]

To see automatic batching in action, you can modify Counter.tsx to include a function that updates state and then uses fetch to make an API call:

import React,  useState  from 'react';
const Counter = () => 
  const [count, setCount] = useState(0);
const handleClick = async () => 
    // Before React 18, setCount would not batch with async code
    // Now, React 18 automatically batches updates
    setCount(count + 1);
    await fetch('https://example.com/api/data');
    // State updates here will batch with the previous setCount
  ;
return (
    <div>
      <p>You clicked count times</p>
      <button onClick=handleClick>
        Click me
      </button>
    </div>
  );
;
export default Counter;

Theory is useless without practice. The final project is a Task Manager with Categories and Local Storage. You build:

This project is small enough to finish in a weekend but complete enough to mirror real junior dev tasks. code mosh react 18 beginners fco better

Here's a simple example of a functional component in React 18. Let's create a counter:

import React,  useState  from 'react';
function Counter() 
  const [count, setCount] = useState(0);
return (
    <div>
      <p>You clicked count times</p>
      <button onClick=() => setCount(count + 1)>
        Click me
      </button>
    </div>
  );
export default Counter;

Now, let's discuss the FCO part of our keyword. FCO stands for Functional Components Only. To see automatic batching in action, you can modify Counter

Five years ago, React had two ways to write components: Class Components (with this.state and this.setState) and Functional Components (stateless). Today, thanks to Hooks (introduced in React 16.8 and matured in React 18), Functional Components can do everything class components can do—and more.

Let’s look at a simple counter app. This is the "Hello World" of React. Theory is useless without practice

React 18 introduces several significant improvements and new features: