### App.js

Source: https://18.react.dev/learn/installation

An example React component demonstrating a simple greeting.

```javascript
function Greeting({ name }) {
return <h1>Hello, {name}</h1>;
}
  
export default function App() {
return <Greeting name="world" />
}
```

--------------------------------

### Context provider setup

Source: https://18.react.dev/reference/react/use

Example showing how to wrap components with a context provider to pass context values

```javascript
function MyPage() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  );
}

function Form() {
  // ... renders buttons inside ...
}
```

--------------------------------

### Example list before update

Source: https://18.react.dev/learn/tutorial-tic-tac-toe

An example of a list of tasks before any updates or reordering.

```html
<li>Alexa: 7 tasks left</li>  
<li>Ben: 5 tasks left</li>
```

--------------------------------

### Basic preinit example

Source: https://18.react.dev/reference/react-dom/preinit

Simple example showing how to preinit an external script using the preinit function.

```javascript
preinit("https://example.com/script.js", {as: "script"});
```

--------------------------------

### Example list after update

Source: https://18.react.dev/learn/tutorial-tic-tac-toe

An example of the same list after some items have been updated, reordered, and a new item inserted.

```html
<li>Ben: 9 tasks left</li>  
<li>Claudia: 8 tasks left</li>  
<li>Alexa: 5 tasks left</li>
```

--------------------------------

### Component Definition Example

Source: https://18.react.dev/reference/rsc/use-client

Example showing what a component definition looks like - a function that returns JSX.

```javascript
// This is a definition of a component

function MyComponent() {
  return <p>My Component</p>
}
```

--------------------------------

### Complete createElement example (App.js)

Source: https://18.react.dev/reference/react/createElement

A full `App.js` example demonstrating component definition and rendering using `createElement`.

```javascript
import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

export default function App() {
  return createElement(
    Greeting,
    { name: 'Taylor' }
  );
}
```

--------------------------------

### Basic useActionState Example

Source: https://18.react.dev/reference/react/useActionState

Example demonstrating how to use useActionState with a simple increment action

```javascript
import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  )
}
```

--------------------------------

### Complete JSX example (App.js)

Source: https://18.react.dev/reference/react/createElement

A full `App.js` example demonstrating component definition and rendering using JSX.

```javascript
function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

export default function App() {
  return <Greeting name="Taylor" />;
}
```

--------------------------------

### Install Beta Release with npm

Source: https://18.react.dev/learn/react-compiler

Command to install the Beta release of babel-plugin-react-compiler and eslint-plugin-react-compiler using npm.

```bash
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
```

--------------------------------

### Inline and external script examples

Source: https://18.react.dev/reference/react-dom/components/script

Examples showing both an inline script and an external script using the <script> component.

```HTML
<script> alert("hi!") </script>  

<script src="script.js" />
```

--------------------------------

### Complete nested components example

Source: https://18.react.dev/learn

A full example demonstrating the MyButton component nested within MyApp.

```javascript
function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
```

--------------------------------

### Install Beta Release with Yarn

Source: https://18.react.dev/learn/react-compiler

Command to install the Beta release of babel-plugin-react-compiler and eslint-plugin-react-compiler using Yarn.

```bash
yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
```

--------------------------------

### Symmetrical setup and cleanup logic

Source: https://18.react.dev/reference/react/useEffect

Example demonstrating the correct pattern where cleanup logic is symmetrical to setup logic, stopping or undoing what setup did.

```javascript
useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => {
    connection.disconnect();
  };
}, [serverUrl, roomId]);
```

--------------------------------

### Installing react-shallow-renderer directly

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Command to install react-shallow-renderer directly instead of using react-test-renderer/shallow.

```bash
npm install react-shallow-renderer --save-dev
```

--------------------------------

### Original function prop example

Source: https://18.react.dev/reference/react/useMemo

Example of a memoized Form component receiving a function prop that gets recreated on every render.

```javascript
export default function ProductPage({ productId, referrer }) {
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }
  
  return <Form onSubmit={handleSubmit} />;
}
```

--------------------------------

### Basic input component

Source: https://18.react.dev/reference/react-dom/components/input

Minimal example showing how to render a basic input component

```jsx
<input />
```

--------------------------------

### Install React and React DOM with Yarn

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Command to install React 19 and React DOM 19 using Yarn.

```bash
yarn add --exact react@^19.0.0 react-dom@^19.0.0
```

--------------------------------

### I’ve created a root, but nothing is displayed

Source: https://18.react.dev/reference/react-dom/client/createRoot

Correct way to render an app into a root after creation.

```javascript
import { createRoot } from 'react-dom/client';  
import App from './App.js';  
  
const root = createRoot(document.getElementById('root'));  
root.render(<App />);
```

--------------------------------

### Install React and React DOM with npm

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Command to install React 19 and React DOM 19 using npm.

```bash
npm install --save-exact react@^19.0.0 react-dom@^19.0.0
```

--------------------------------

### Cleanup logic without corresponding setup logic (anti-pattern)

Source: https://18.react.dev/reference/react/useEffect

Example showing an anti-pattern where cleanup code exists without corresponding setup code, which is considered a code smell.

```javascript
useEffect(() => {
  // 🔴 Avoid: Cleanup logic without corresponding setup logic
  return () => {
    doSomething();
  };
}, []);
```

--------------------------------

### Preiniting an external script

Source: https://18.react.dev/reference/react-dom/preinit

Example demonstrating how to preinit an external script resource from a component.

```javascript
import { preinit } from 'react-dom';

function AppRoot() {
  preinit("https://example.com/script.js", {as: "script"});
  return ...;
}
```

--------------------------------

### Complete Blog example with Fragment

Source: https://18.react.dev/reference/react/Fragment

Full working example showing Fragment usage in a blog component with sample data, including helper components PostTitle and PostBody.

```jsx
import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}
```

--------------------------------

### Initial Effect setup

Source: https://18.react.dev/learn/removing-effect-dependencies

Specifying how to start and stop an Effect without dependencies.

```javascript
const serverUrl = 'https://localhost:1234';  
  
function ChatRoom({ roomId }) {  
  useEffect(() => {  
    const connection = createConnection(serverUrl, roomId);  
    connection.connect();  
    return () => connection.disconnect();  
  	// ...  
}
```

--------------------------------

### Pure Component Example

Source: https://18.react.dev/learn/describing-the-ui

The corrected version of the previous example, demonstrating a pure component by passing 'guest' as a prop instead of modifying a global variable.

```javascript
function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}
```

--------------------------------

### Server-only React component example

Source: https://18.react.dev/learn/start-a-new-react-project

Example of a server-only React component using an async function to fetch data and pass it to interactive components. This component runs only on the server or during the build.

```javascript
// This component runs *only* on the server (or during the build).  

async function Talks({ confId }) {  

  // 1. You're on the server, so you can talk to your data layer. API endpoint not required.  

  const talks = await db.Talks.findAll({ confId });  

  

  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.  

  const videos = talks.map(talk => talk.video);  

  

  // 3. Pass the data down to the components that will run in the browser.  

  return <SearchableVideoList videos={videos} />;  

}
```

--------------------------------

### Create a new Next.js project

Source: https://18.react.dev/learn/start-a-new-react-project

Command to initialize a new Next.js application using create-next-app.

```shell
npx create-next-app@latest
```

--------------------------------

### Migrating React.createFactory to JSX

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Example showing how to migrate from React.createFactory to JSX syntax.

```javascript
// Before  

import { createFactory } from 'react';  

  

const button = createFactory('button');
```

```javascript
// After  

const button = <button />;
```

--------------------------------

### Basic 'use client' Example

Source: https://18.react.dev/reference/rsc/use-client

Example showing how to add 'use client' at the top of a file to mark a module and its dependencies as client code, including imports and a component definition.

```javascript
'use client';

import { useState } from 'react';
import { formatDate } from './formatters';
import Button from './button';

export default function RichTextEditor({ timestamp, text }) {
  const date = formatDate(timestamp);
  // ...
  const editButton = <Button />;
  // ...
}
```

--------------------------------

### Component Usage Example

Source: https://18.react.dev/reference/rsc/use-client

Example showing what a component usage looks like - importing and calling a component definition within another component.

```javascript
import MyComponent from './MyComponent';

function App() {
  // This is a usage of a component
  return <MyComponent />;
}
```

--------------------------------

### useImperativeHandle basic setup

Source: https://18.react.dev/reference/react/useImperativeHandle

Example showing how to call useImperativeHandle at the top level of a component to customize the ref handle it exposes.

```javascript
import { forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  useImperativeHandle(ref, () => {
    return {
      // ... your methods ...
    };
  }, []);
  // ...
```

--------------------------------

### State initialization for stopwatch

Source: https://18.react.dev/learn/referencing-values-with-refs

Example of initializing state variables for tracking start time and current time in a stopwatch component.

```javascript
const [startTime, setStartTime] = useState(null);
const [now, setNow] = useState(null);
```

--------------------------------

### Basic useDeferredValue Hook Usage

Source: https://18.react.dev/reference/react/useDeferredValue

Simple example showing how to call useDeferredValue at the top level of a component to get a deferred version of a value.

```javascript
const deferredValue = useDeferredValue(value)
```

--------------------------------

### Preloading a module in an event handler

Source: https://18.react.dev/reference/react-dom/preinitModule

Example of calling `preinitModule` within an event handler to start module evaluation before a page transition or state change.

```javascript
import { preinitModule } from 'react-dom';  

function CallToAction() {  
  const onClick = () => {  
    preinitModule("https://example.com/module.js", {as: "script"});  
    startWizard();  
  }  
  return (  
    <button onClick={onClick}>Start Wizard</button>  
  );  
}
```

--------------------------------

### Basic use API syntax

Source: https://18.react.dev/reference/react/use

Simple example showing the basic syntax of calling the use API with a resource

```javascript
const value = use(resource);
```

--------------------------------

### Complete example of context usage with multiple components

Source: https://18.react.dev/reference/react/useContext

A full example demonstrating createContext, ThemeContext.Provider, and useContext across several nested components (MyApp, Form, Panel, Button).

```javascript
import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}
```

--------------------------------

### I’m getting an error: “Target container is not a DOM element”

Source: https://18.react.dev/reference/react-dom/client/createRoot

Debugging example to check if the DOM node passed to createRoot is valid.

```javascript
const domNode = document.getElementById('root');  
console.log(domNode); // ???  
const root = createRoot(domNode);  
root.render(<App />);
```

--------------------------------

### useRef Argument Requirements

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Examples showing that useRef now requires an argument, with TypeScript error expectations and comparison to createContext behavior.

```typescript
// @ts-expect-error: Expected 1 argument but saw none
useRef();

// Passes
useRef(undefined);

// @ts-expect-error: Expected 1 argument but saw none
createContext();

// Passes
createContext(undefined);
```

--------------------------------

### Migrating string refs to ref callbacks

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Example showing how to migrate from string refs to ref callbacks in class components.

```javascript
// Before  

class MyComponent extends React.Component {  

  componentDidMount() {  

    this.refs.input.focus();  

  }  

  

  render() {  

    return <input ref='input' />;  

  }  

}
```

```javascript
// After  

class MyComponent extends React.Component {  

  componentDidMount() {  

    this.input.focus();  

  }  

  

  render() {  

    return <input ref={input => this.input = input} />;  

  }  

}
```

--------------------------------

### Initial App.js with Profile and Gallery components

Source: https://18.react.dev/learn/importing-and-exporting-components

An example of a root component file (App.js) containing both the Profile and Gallery components before they are split into separate files.

```javascript
function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}
  
export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
```

--------------------------------

### HTML document structure example

Source: https://18.react.dev/learn/your-first-component

An example of how HTML tags are used to create a structured document with an article, heading, and ordered list.

```html
<article>  

  <h1>My First Component</h1>  

  <ol>  

    <li>Components: UI Building Blocks</li>  

    <li>Defining a Component</li>  

    <li>Using a Component</li>  

  </ol>  

</article>
```

--------------------------------

### ChatRoom Component with useEffect

Source: https://18.react.dev/reference/react/useEffect

Example demonstrating useEffect usage for connecting to an external system (chat connection) with setup and cleanup functions, including reactive dependencies

```javascript
import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}
```

--------------------------------

### Example of componentDidMount, componentDidUpdate, and componentWillUnmount

Source: https://18.react.dev/reference/react/Component

A `ChatRoom` class component demonstrating the implementation of `componentDidMount` for initial setup, `componentDidUpdate` for handling prop/state changes, and `componentWillUnmount` for cleanup.

```javascript
class ChatRoom extends Component {  

  state = {  

    serverUrl: 'https://localhost:1234'  

  };  

  

  componentDidMount() {  

    this.setupConnection();  

  }  

  

  componentDidUpdate(prevProps, prevState) {  

    if (  

      this.props.roomId !== prevProps.roomId ||  

      this.state.serverUrl !== prevState.serverUrl  

    ) {  

      this.destroyConnection();  

      this.setupConnection();  

    }  

  }  

  

  componentWillUnmount() {  

    this.destroyConnection();  

  }  

  

  // ...  

}
```

--------------------------------

### Reading Promise and context with use

Source: https://18.react.dev/reference/react/use

Example demonstrating how to use the use API to read both a Promise and context within a component

```javascript
import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
```

--------------------------------

### ReactElement Props Type Changes

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Examples showing how ReactElement props now default to unknown instead of any, with and without explicit type arguments.

```typescript
type Example2 = ReactElement<{ id: string }>["props"];
//   ^? { id: string }
```

```typescript
type Example = ReactElement["props"];
//   ^? Before, was 'any', now 'unknown'
```

--------------------------------

### Initial application setup

Source: https://18.react.dev/reference/react/StrictMode

The `index.js` file setting up the React application, rendering the `App` component without Strict Mode. This serves as the base for demonstrating a bug.

```javascript
import { createRoot } from 'react-dom/client';
import './styles.css';

import App from './App';

const root = createRoot(document.getElementById("root"));
root.render(<App />);

```

--------------------------------

### Migrating Module pattern factories to regular functions

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Example showing how to migrate from module pattern factories to regular function components.

```javascript
// Before  

function FactoryComponent() {  

  return { render() { return <div />; } }  

}
```

```javascript
// After  

function FactoryComponent() {  

  return <div />;  

}
```

--------------------------------

### Using useTransition to indicate transition status

Source: https://18.react.dev/reference/react/Suspense

Example showing how to use the useTransition hook to get an isPending boolean value that can be used to provide visual feedback during navigation.

```javascript
import { Suspense, useState, useTransition } from 'react';
import IndexPage from './IndexPage.js';
import ArtistPage from './ArtistPage.js';
import Layout from './Layout.js';

export default function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Router />
    </Suspense>
  );
}

function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }

  let content;
  if (page === '/') {
    content = (
      <IndexPage navigate={navigate} />
    );
  } else if (page === '/the-beatles') {
    content = (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  }
  return (
    <Layout isPending={isPending}>
      {content}
    </Layout>
  );
}

function BigSpinner() {
  return <h2>🌀 Loading...</h2>;
}
```

--------------------------------

### Basic preconnect usage

Source: https://18.react.dev/reference/react-dom/preconnect

Simple example showing how to call preconnect with a server URL.

```javascript
preconnect("https://example.com");
```

--------------------------------

### Loading React 19 with ESM-based CDN

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Example of loading React 19 using an ESM-based CDN like esm.sh with a script tag.

```html
<script type="module">  

  import React from "https://esm.sh/react@19/?dev"  

  import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"  

  ...  

</script>
```

--------------------------------

### Importing and using memo

Source: https://18.react.dev/reference/react/memo

Demonstrates how to import memo and wrap a functional component.

```javascript
import { memo } from 'react';  
  
const SomeComponent = memo(function SomeComponent(props) {  
  // ...  
});
```

--------------------------------

### Custom error handling with createRoot

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Example demonstrating how to use `onUncaughtError` and `onCaughtError` options with `createRoot` for custom error reporting in React 19.

```javascript
const root = createRoot(container, {  
  onUncaughtError: (error, errorInfo) => {  
    // ... log error report  
  },  
  onCaughtError: (error, errorInfo) => {  
    // ... log error report  
  }  
});
```

--------------------------------

### React component composition example

Source: https://18.react.dev/learn/your-first-component

An example demonstrating how React components can be composed, ordered, and nested to build complex page layouts.

```jsx
<PageLayout>  

  <NavigationHeader>  

    <SearchBar />  

    <Link to="/docs">Docs</Link>  

  </NavigationHeader>  

  <Sidebar />  

  <PageContent>  

    <TableOfContents />  

    <DocumentationText />  

  </PageContent>  

</PageLayout>
```

--------------------------------

### useReducer Type Parameter Migration

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Examples demonstrating the new best practice of not passing type arguments to useReducer and relying on contextual typing instead.

```typescript
- useReducer<React.Reducer<State, Action>>(reducer)
+ useReducer(reducer)
```

```typescript
- useReducer<React.Reducer<State, Action>>(reducer)
+ useReducer<State, [Action]>(reducer)
```

```typescript
- useReducer<React.Reducer<State, Action>>((state, action) => state)
+ useReducer((state: State, action: Action) => state)
```

```typescript
const reducer = (state: State, action: Action) => state;
```

--------------------------------

### Handling keyboard events

Source: https://18.react.dev/reference/react-dom/components/common

This example shows some common keyboard events and when they fire.

```javascript
export default function KeyboardExample() {
  return (
    <label>
      First name:
      <input
        name="firstName"
        onKeyDown={e => console.log('onKeyDown:', e.key, e.code)}
        onKeyUp={e => console.log('onKeyUp:', e.key, e.code)}
      />
    </label>
  );
}
```

--------------------------------

### Migrating Legacy Context to new contextType API

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Example showing how to migrate from Legacy Context APIs (contextTypes, getChildContext) to the new contextType API.

```javascript
// Before  

import PropTypes from 'prop-types';  

  

class Parent extends React.Component {  

  static childContextTypes = {  

    foo: PropTypes.string.isRequired,  

  };  

  

  getChildContext() {  

    return { foo: 'bar' };  

  }  

  

  render() {  

    return <Child />;  

  }  

}  

  

class Child extends React.Component {  

  static contextTypes = {  

    foo: PropTypes.string.isRequired,  

  };

  

  render() {  

    return <div>{this.context.foo}</div>;  

  }  

}
```

```javascript
// After  

const FooContext = React.createContext();  

  

class Parent extends React.Component {  

  render() {  

    return (  

      <FooContext value='bar'>  

        <Child />  

      </FooContext>  

    );  

  }  

}  

  

class Child extends React.Component {  

  static contextType = FooContext;  

  

  render() {  

    return <div>{this.context}</div>;  

  }  

}
```

--------------------------------

### Complete example: Counters that update together

Source: https://18.react.dev/learn

A full, combined example demonstrating lifting state up to MyApp and passing it down to MyButton components for synchronized updates.

```javascript
import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}
```

--------------------------------

### Migrating propTypes and defaultProps for function components

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Example showing how to migrate from propTypes and defaultProps to TypeScript interfaces and ES6 default parameters for function components.

```javascript
// Before  

import PropTypes from 'prop-types';  

  

function Heading({text}) {  

  return <h1>{text}</h1>;  

}  

Heading.propTypes = {  

  text: PropTypes.string,  

};  

Heading.defaultProps = {  

  text: 'Hello, world!',  

};
```

```typescript
// After  

interface Props {  

  text?: string;  

}  

function Heading({text = 'Hello, world!'}: Props) {  

  return <h1>{text}</h1>;  

}
```

--------------------------------

### Fixing implicit ref callback returns

Source: https://18.react.dev/blog/2024/04/25/react-19-upgrade-guide

Example demonstrating how to fix ref callback functions that implicitly return a value, which is now rejected by TypeScript due to ref cleanup functions.

```typescript
- <div ref={current => (instance = current)} />  
+ <div ref={current => {instance = current}} />
```

--------------------------------

### Integrating data fetching with Suspense

Source: https://18.react.dev/learn/start-a-new-react-project

Example showing how to use Suspense to specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree.

```jsx
<Suspense fallback={<TalksLoading />}>  

  <Talks confId={conf.id} />  

</Suspense>
```