react/directives

19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

'use client' directive

The 'use client' directive marks what code runs on the client. It is used in React Server Components to indicate that a module and its dependencies should be executed in the browser.

'use server' directive

The 'use server' directive marks server-side functions that can be called from client-side code. It is used in React Server Components to expose server functions to client components.

Directives for React Server Components

Directives provide instructions to bundlers compatible with React Server Components. They are used to control code execution environments and function visibility.

'use client' directive syntax and placement

The 'use client' directive must be placed at the very beginning of a file, above any imports or other code (comments are allowed). It must be written with single or double quotes, not backticks. For example: 'use client'; at line 1 of a module.

'use client' marks module and transitive dependencies as client code

When a file is marked with 'use client' at the top, that module and all of its transitive dependencies are marked as client code. This creates a server-client boundary in the module dependency tree, creating a subtree of Client modules. As dependencies of a 'use client' module, imported modules will be evaluated on the client regardless of whether they contain their own 'use client' directive.

'use client' has no effect when imported from client modules

When a 'use client' module is imported from another client-rendered module, the 'use client' directive has no effect.

Component marked with 'use client' is guaranteed to be a Client Component

When a component module contains a 'use client' directive, any usage of that component is guaranteed to be a Client Component. However, a component can still be evaluated on the client even if it does not have a 'use client' directive.

Component usage definition: when is it a Client Component

A component usage is considered a Client Component if it is defined in a module with a 'use client' directive or when it is a transitive dependency of a module that contains a 'use client' directive. Otherwise, it is a Server Component.

'use client' affects module dependency tree, not render tree

'use client' defines the boundary between server and client code on the module dependency tree, not the render tree. A component rendered as a child of a Client Component in the render tree can still be a Server Component if it is not part of the client module dependency tree.

All code in 'use client' module subtree is sent to and run by the client

Code that is marked for client evaluation is not limited to components. All code that is part of the Client module sub-tree is sent to and run by the client.

Server component importing from 'use client' module restrictions

When a server evaluated module imports values from a 'use client' module, the values must either be a React component or supported serializable prop values to be passed to a Client Component. Any other use case will throw an exception.

Serializable prop types for Server to Client Component passing

Prop values passed from a Server Component to Client Component must be serializable. Supported types are: primitives (string, number, bigint, boolean, undefined, null, symbol via Symbol.for), iterables containing serializable values (String, Array, Map, Set, TypedArray, ArrayBuffer), Date, plain objects with serializable properties, Server Functions, Client or Server Component elements (JSX), and Promises.

Non-serializable prop types for Server to Client Component passing

The following are NOT supported as props from Server Components to Client Components: Functions not exported from client-marked modules or marked with 'use server', Classes, objects that are instances of any class other than built-ins mentioned, objects with a null prototype, and Symbols not registered globally (e.g. Symbol('my new symbol')).

When to use 'use client': interactivity and state

Components that require interactivity or state must be marked as Client Components with 'use client'. This includes components that use event handlers like onClick or the useState Hook.

Server Components cannot support event handlers or most Hooks

Server Components cannot use most Hooks because they do not persist in memory after render and cannot have their own state. Event handlers like onClick can only be defined in Client Components.

When to use 'use client': browser and client-specific APIs

Components that use browser-specific APIs such as DOM APIs, web storage, audio and video manipulation, or device hardware must be marked as Client Components with 'use client'.

Third-party libraries requiring 'use client'

Third-party components that use createContext, React and react-dom Hooks (excluding use and useId), forwardRef, memo, startTransition, or client APIs must run on the client. If the library has not been updated for React Server Components compatibility, you may need to create a Client Component wrapper between the third-party Client Component and your Server Component.

'use client' example: interactive Counter component

Example showing 'use client' usage: 'use client'; import { useState } from 'react'; export default function Counter({initialValue = 0}) { const [countValue, setCountValue] = useState(initialValue); const increment = () => setCountValue(countValue + 1); const decrement = () => setCountValue(countValue - 1); return ( <> <h2>Count Value: {countValue}</h2> <button onClick={increment}>+1</button> <button onClick={decrement}>-1</button> </> ); } This component requires 'use client' because it uses useState Hook and event handlers.

'use client' example: canvas drawing with DOM API

Example showing 'use client' for DOM API usage: 'use client'; import {useRef, useLayoutEffect} from 'react'; export default function Circle() { const ref = useRef(null); useLayoutEffect(() => { const canvas = ref.current; const context = canvas.getContext('2d'); context.reset(); context.beginPath(); context.arc(100, 75, 50, 0, 2 * Math.PI); context.stroke(); }); return <canvas ref={ref} />; } This component requires 'use client' because it uses DOM APIs which are only available in the browser.

Give your agent this brain