DEV Community: Atilla Baspinar

Create a AI customer service using LangChain

Atilla Baspinar — Tue, 13 Oct 2026 09:31:58 +0000

What we're building: a multimodal customer-service agent

We'll build a customer-service agent that helps a customer troubleshoot an app error. The customer first describes the problem in text. The agent asks for a screenshot and a short voice explanation, then uses both files to suggest a next step. The customer doesn't have to start the conversation over.

The agent offers guidance; it does not actually repair the customer's device or claim that it has. In this example, we'll focus on how the conversation flows, how to send image and audio inputs, and how the agent keeps earlier turns in context.

For the second part of the example, prepare two sample files in the directory where you run the code:

error.png — a screenshot showing the app's error.
issue_details.wav — a short voice recording with details about what happened.

The example uses a Gemini model with image and audio input support. Install its LangChain integration and configure your API key before running the code:

pip install -U "langchain[google-genai]"
export GOOGLE_API_KEY="your-google-api-key"

Build the customer-service agent

import base64
from pathlib import Path

from langchain.agents import create_agent
from langchain.chat_models import init_chat_model
from langchain.messages import HumanMessage
from langgraph.checkpoint.memory import InMemorySaver

# Initialize a model that can accept both image and audio inputs.
model = init_chat_model("google_genai:gemini-3.7-flash")

# Tell the agent how to handle support requests and when to ask for evidence.
agent = create_agent(
    model=model,
    tools=[],
    system_prompt=(
        "You are a friendly customer-service assistant helping customers "
        "troubleshoot app problems. If the customer describes an error but "
        "has not provided enough detail, ask them to upload a screenshot and "
        "send a short voice recording explaining what they were doing. Use "
        "provided screenshots and audio to understand the issue. Ask for "
        "clarification if needed, and do not claim to have fixed anything."
    ),
    # Keep conversation state between calls that use the same thread ID.
    checkpointer=InMemorySaver(),
)

# Reuse this ID for every message in this support case.
thread_config = {"configurable": {"thread_id": "support-case-1042"}}

# First, the customer describes the problem using text only.
initial_result = agent.invoke(
    {
        "messages": [
            {
                "role": "user",
                "content": (
                    "My budgeting app shows an error when I try to export "
                    "a monthly report. Can you help?"
                ),
            }
        ]
    },
    config=thread_config,
)
print("Agent:", initial_result["messages"][-1].content)

# After the agent asks for more information, read the customer's screenshot
# and voice recording and encode their file contents for the message.
image_base64 = base64.b64encode(Path("error.png").read_bytes()).decode("utf-8")
audio_base64 = base64.b64encode(Path("issue_details.wav").read_bytes()).decode("utf-8")

# Send the requested screenshot and voice details as the next user turn.
evidence_result = agent.invoke(
    {
        "messages": [
            HumanMessage(
                content=[
                    {
                        "type": "text",
                        "text": (
                            "Here are the screenshot and voice details you asked for. "
                            "Please use them to help troubleshoot the export error."
                        ),
                    },
                    {
                        # The MIME type should match the actual image format.
                        "type": "image",
                        "base64": image_base64,
                        "mime_type": "image/png",
                    },
                    {
                        # Audio is sent in its own content block.
                        "type": "audio",
                        "base64": audio_base64,
                        "mime_type": "audio/wav",
                    },
                ]
            )
        ]
    },
    config=thread_config,
)
print("Agent:", evidence_result["messages"][-1].content)

How the tech works

Multimodal messages

A multimodal message contains more than text: it can include content such as images or audio. In LangChain, a HumanMessage can contain a list of content blocks, combining text with media. The model receives that message and can use the media to respond.

The first customer turn is text-only. In the second turn, a HumanMessage combines text, an image block, and an audio block. Each block's type identifies its content; base64 carries the encoded file data and mime_type identifies its format.

Base64 encoding

base64.b64encode(Path(...).read_bytes()).decode("utf-8") reads a local file, encodes its bytes as Base64, and converts the result to a string for the content block. The MIME type must match the file: this example uses image/png for the screenshot and audio/wav for the recording.

Conversation memory

The shared thread_id tells the agent that the screenshot and recording belong to the same support conversation as the customer's initial question. The checkpointer saves the conversation state between calls, allowing the agent to use earlier messages as context. Use a different thread ID for a different customer or case.

InMemorySaver is suitable for a small demo, but its checkpoints live only in the running process and disappear when it stops. For a production application, use a persistent checkpointer and an appropriate retention policy.

Model and media support

The exact formats and limits depend on the model provider. The selected Gemini model supports image and audio input, but not every model accepts every media type or content-block format. Check the provider's current documentation for supported formats and size limits. Sending a file as Base64 does not make a text-only model capable of understanding it.

Depending on the provider and model, audio may be transcribed, interpreted directly, or require a provider-specific format. If the standard audio block is unsupported, use the provider's documented format or transcribe the recording first and send the resulting text.

A quick privacy reminder

Screenshots and recordings can contain personal or confidential information. Send only files you are authorized to process, avoid logging sensitive media unnecessarily, and remember that a checkpointer may retain message content.

15 - React: Rendering component dynamically

Atilla Baspinar — Mon, 12 Oct 2026 14:42:02 +0000

In JSX, React distinguishes between:

built-in HTML elements: lowercase names like div, button, section
custom components: capitalized names like Card, Button, Profile

A common pattern is to pass the element/component as a prop and render it dynamically.

type BoxProps = {
  as?: React.ElementType;
  children: React.ReactNode;
};

function Box({ as: Component = 'div', children }: BoxProps) {
  return <Component>{children}</Component>;
}

export default function App() {
  return (
    <>
      <Box as="section">This is a section</Box>
      <Box as={CustomCard}>This uses a custom component</Box>
    </>
  );
}

function CustomCard({ children }: { children: React.ReactNode }) {
  return <div style={{ border: '1px solid #ccc', padding: 12 }}>{children}</div>;
}

Important rules:

as="section" renders a built-in HTML tag.
as={CustomCard} renders a custom React component.
The component name must start with an uppercase letter.
as is just a prop name here; React does not give it special meaning by itself.

A simpler version is also valid:

function Button({ Tag = 'button', children, ...props }) {
  return <Tag {...props}>{children}</Tag>;
}

Then:

<Button Tag="a" href="#">Link</Button>
<Button Tag={PrimaryButton}>Custom button</Button>

14 - React Router: actions, forms, and submission

Atilla Baspinar — Mon, 12 Oct 2026 14:40:39 +0000

Routes can define an action in addition to a loader. Actions are used for form submissions, mutations, and server-like updates.

1. Defining a route action

import { redirect } from 'react-router';

export async function productAction({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const productId = params.productId;
  const name = formData.get('name');

  if (!name || typeof name !== 'string') {
    return { error: 'Product name is required.' };
  }

  await saveProduct(productId, name);

  return redirect('/products');
}

The route can then declare the action:

const router = createBrowserRouter([
  {
    path: '/products/:productId',
    Component: Product,
    action: productAction,
    errorElement: <ProductError />,
  },
]);

The action runs when a form submits to that route. This is the React Router equivalent of handling a POST request in a route.

2. `Form` element

React Router provides a special Form component that automatically submits to the closest route action.

import { Form } from 'react-router';

export function ProductForm() {
  return (
    <Form method="post">
      <input name="name" type="text" />
      <button type="submit">Save</button>
    </Form>
  );
}

This is the simplest approach for most forms because:

no custom submit handler is required
the browser form submission is converted to a route action
the form data is available inside the action via request.formData()

If the action returns redirect(...), the route will navigate after the form is processed.

3. `useSubmit`

If you do not want to use <Form>, you can submit programmatically with useSubmit.

import { useSubmit } from 'react-router';

export function DeleteButton({ productId }: { productId: string }) {
  const submit = useSubmit();

  const handleDelete = () => {
    submit(
      { productId },
      { method: 'delete' }
    );
  };

  return <button onClick={handleDelete}>Delete</button>;
}

This is useful for buttons, custom UI, or programmatic mutation flows. The submission still goes through the route action, but you are controlling when it happens.

4. `useNavigation`

useNavigation works with both loaders and actions. It gives you the current navigation state and can be used to disable buttons or show a loading indicator.

import { useNavigation } from 'react-router';

export function SaveButton() {
  const navigation = useNavigation();

  return (
    <button disabled={navigation.state === 'submitting'}>
      {navigation.state === 'submitting' ? 'Saving...' : 'Save'}
    </button>
  );
}

Possible values usually include:

idle
loading
submitting

This is especially useful for giving immediate visual feedback while a form is being submitted.

5. `useActionData`

useActionData returns the value returned from the action function. It is similar in spirit to useLoaderData but for actions.

import { useActionData } from 'react-router';

export function ProductForm() {
  const actionData = useActionData() as { error?: string } | undefined;

  return (
    <>
      <Form method="post">
        <input name="name" type="text" />
        <button type="submit">Save</button>
      </Form>

      {actionData?.error && <p>{actionData.error}</p>}
    </>
  );
}

This pattern is commonly used for validation errors or server-side feedback after a form submission.

6. `useFetcher`

useFetcher is useful when you want to submit or load data without causing a full route navigation.

import { useFetcher } from 'react-router';

export function ProductSearch() {
  const fetcher = useFetcher();

  return (
    <fetcher.Form method="get" action="/products/search">
      <input name="q" type="text" />
      <button type="submit">Search</button>
    </fetcher.Form>
  );
}

The fetcher keeps its own state independent from the main route navigation:

const { data, state } = fetcher;

This means a form can submit in the background while the page stays where it is. This is useful for search, autosave panels, or non-navigation-related updates.

7. `Await`

React Router still supports the Await component for rendering asynchronous data in a Suspense-friendly way.

import { Await, Suspense } from 'react-router';

export function ProductList({ productsPromise }: { productsPromise: Promise<Product[]> }) {
  return (
    <Suspense fallback={<div>Loading products...</div>}>
      <Await resolve={productsPromise}>
        {(products) => <ProductGrid items={products} />}
      </Await>
    </Suspense>
  );
}

This is useful for asynchronous route data or deferred rendering patterns. In modern React Router, a more common pattern is to use normal loaders and useLoaderData, but Await remains a valid tool for specific deferred-loading scenarios.

Summary

route actions handle form submissions and mutations
Form automatically submits to the closest route action
useSubmit submits data programmatically
useNavigation tracks idle, loading, and submitting
useActionData returns the value from the action
useFetcher submits data without triggering a route change
Await is still available for deferred async rendering

The general rule is simple: loaders fetch data, actions mutate data, and forms connect the two through route actions.

13 - React Router: Data Mode

Atilla Baspinar — Mon, 12 Oct 2026 14:39:50 +0000

This tutorial covers the React Router v7+ data-router APIs used by modern React Router applications. The project currently uses React Router 8.3.1 and the declarative route configuration style.

React Router routes are declared in a route tree. The router creates the route objects, resolves parameters, runs loaders, and renders the matching component.

1. Creating a router

Use createBrowserRouter to create a router for browser navigation. The router configuration can contain route components, nested children, loaders, and error elements.

import { createBrowserRouter, RouterProvider } from 'react-router';
import { Layout } from './Layout';
import Home from './Home';
import { Products } from './Products';

const router = createBrowserRouter([
  {
    path: '/',
    Component: Layout,
    children: [
      { path: '/', Component: Home },
      { path: '/products', Component: Products },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

The route component is declared with Component, not with an element property. The root route contains a Layout component and its child routes are rendered through <Outlet />.

2. Navigation with `Link` and `NavLink`

Use Link for normal navigation and NavLink when the link should reflect the current route.

import { Link, NavLink } from 'react-router';

export function MainNavigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/products">Products</Link>

      <NavLink
        to="/products"
        className={({ isActive, isPending }) =>
          isPending ? 'pending' : isActive ? 'active' : ''
        }
      >
        Products
      </NavLink>
    </nav>
  );
}

The NavLink callback receives:

isActive: whether the current location matches the link
isPending: whether a navigation to that link is in progress

3. Nested routes and layouts

A layout route can render a shared header or sidebar and then render the current page through <Outlet />.

import { Outlet } from 'react-router';

export function Layout() {
  return (
    <div>
      <header>
        <h1>My Application</h1>
      </header>

      <main>
        <Outlet />
      </main>
    </div>
  );
}

The route tree can then be structured as follows:

const router = createBrowserRouter([
  {
    path: '/',
    Component: Layout,
    children: [
      { index: true, Component: Home },
      { path: 'products', Component: Products },
    ],
  },
]);

Using index: true makes the home page the index route without requiring a separate empty path. The parent route's <Outlet /> renders either Home or Products.

4. Programmatic navigation with `useNavigate`

Use useNavigate when navigation needs to be triggered by an event handler.

import { useNavigate } from 'react-router';

export function ProductButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/products');
  };

  return <button onClick={handleClick}>View products</button>;
}

The navigation function accepts a route path. For relative navigation, the router uses the current route context.

5. Dynamic routes

A route parameter is declared with a colon in the route path.

const router = createBrowserRouter([
  {
    path: '/',
    Component: Layout,
    children: [
      { path: 'products/:productId', Component: Product },
    ],
  },
]);

The URL /products/123 matches the route and provides the parameter productId.

Read the parameter with useParams inside the matched component:

import { useParams } from 'react-router';

export function Product() {
  const { productId } = useParams();

  return <div>Product ID: {productId}</div>;
}

useParams() returns a read-only object. The parameter value is a string because it comes from the URL.

6. Loaders

A loader runs before the route component renders. It receives the current request and route parameters.

import type { LoaderFunctionArgs } from 'react-router';

export async function productLoader({ params }: LoaderFunctionArgs) {
  const productId = params.productId;
  const response = await fetch(`/api/products/${productId}`);

  if (!response.ok) {
    throw new Response('Product not found', {
      status: 404,
      statusText: 'Not Found',
    });
  }

  return await response.json();
}

The loader is attached to the route:

const router = createBrowserRouter([
  {
    path: '/products/:productId',
    Component: Product,
    loader: productLoader,
  },
]);

The route component reads the loader result with useLoaderData:

import { useLoaderData } from 'react-router';

export function Product() {
  const product = useLoaderData();

  return <div>{product.name}</div>;
}

The component is not rendered until the loader has resolved successfully. A rejected loader can therefore show an error element instead of rendering the product page.

`useRouteLoaderData`

useLoaderData() reads the data from the route that owns the component using it. If a child component needs data from a parent route's loader, use useRouteLoaderData() with the parent's route ID.

Give the parent route an explicit ID:

const router = createBrowserRouter([
  {
    path: '/products/:productId',
    id: 'product-detail',
    loader: productLoader,
    children: [
      { path: 'edit', Component: ProductEdit },
      { path: 'display', Component: ProductDisplay },
    ],
  },
]);

The parent route has no Component in this example. Its loader still runs, and the child routes can use the parent's loader data.

In a child component, request the parent's data by route ID:

import { useRouteLoaderData } from 'react-router';

export function ProductEdit() {
  const product = useRouteLoaderData<{ name: string }>('product-detail');

  if (!product) {
    return <div>Product data is not available.</div>;
  }

  return <div>Edit product: {product.name}</div>;
}

The important difference is:

useLoaderData() reads the data for the route that owns the current component.
useRouteLoaderData(routeId) reads the loader data for a specific named route, including a parent route.

The route ID must match the id assigned to the parent route. If the route has no explicit ID, React Router may generate an automatic route ID based on its route configuration, but an explicit ID makes the relationship clearer and more stable.

Returning a `Response`

A loader may return a Response directly. This can be useful when the loader needs to preserve an HTTP status or headers.

export async function productLoader() {
  const response = await fetch('/api/products/123');

  if (!response.ok) {
    return new Response('Unable to load the product', {
      status: response.status,
    });
  }

  return response;
}

The returned Response is available through useLoaderData. For normal application data, returning parsed JSON is usually more convenient because the component can work with the resulting object directly.

7. Loader errors and `errorElement`

A loader can throw a Response to trigger an error element:

export async function productLoader({ params }: LoaderFunctionArgs) {
  const response = await fetch(`/api/products/${params.productId}`);

  if (!response.ok) {
    throw new Response('Product not found', {
      status: 404,
      statusText: 'Not Found',
    });
  }

  return await response.json();
}

Attach the error element to the route:

{
  path: '/products/:productId',
  Component: Product,
  loader: productLoader,
  errorElement: <ProductError />,
}

The error component can read the thrown value with useRouteError:

import { useRouteError } from 'react-router';

export function ProductError() {
  const error = useRouteError();

  return <div>{error instanceof Response ? error.status : 'Unknown error'}</div>;
}

useRouteError returns unknown, so the component should check the value before accessing properties such as status, statusText, or message.

8. Tracking navigation state with `useNavigation`

useNavigation returns information about the current navigation. Its state can be idle, loading, or submitting.

import { useNavigation } from 'react-router';

export function LoadingStatus() {
  const navigation = useNavigation();

  if (navigation.state === 'loading') {
    return <div>Loading route...</div>;
  }

  if (navigation.state === 'submitting') {
    return <div>Submitting data...</div>;
  }

  return null;
}

This hook is useful for showing a loading indicator or form-submission status. It does not replace the route loader's result; useLoaderData returns the resolved data, while useNavigation describes navigation state.

Summary

createBrowserRouter defines the route tree.
Link performs normal navigation.
NavLink provides active and pending states.
Outlet renders nested route components.
useNavigate performs navigation from event handlers.
useParams reads URL parameters.
A loader runs before its route component renders.
useLoaderData reads the loader result.
errorElement displays errors from loaders and route rendering.
useRouteError reads the thrown error.
useNavigation tracks whether navigation is loading or submitting.

12 - React: Redux advanced topics

Atilla Baspinar — Mon, 12 Oct 2026 14:39:09 +0000

Redux reducers should be pure functions. This means that, for the same input state and action, a reducer should always produce the same output.

Reducers should not perform side effects such as:

making HTTP requests
starting timers
writing to local storage
showing notifications
changing external state

Instead, those side effects should be handled in places such as components, custom hooks, middleware, or asynchronous thunks.

1) Keeping reducers pure

A reducer receives the previous state and an action, then returns the next state.

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'addToCart':
      return {
        ...state,
        items: [...state.items, action.payload],
      };
    default:
      return state;
  }
};

This reducer does not call the network or modify any external resource. It only calculates a new state object.

2) Handling side effects with `useEffect`

A component can watch a selected value with useSelector and run a side effect when that value changes.

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { cartActions } from './cartSlice';

export default function CartPage() {
  const cart = useSelector((state) => state.cartReducer.cart);
  const dispatch = useDispatch();

  useEffect(() => {
    const saveCart = async () => {
      try {
        await fetch('https://api.example.com/cart', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(cart),
        });
      } catch (error) {
        console.error('Unable to save the cart', error);
      }
    };

    saveCart();
  }, [cart]);

  return <div>Cart items: {cart.length}</div>;
}

Here, the useEffect is responsible for the HTTP request. The reducer remains responsible only for updating the Redux state.

A critical detail is that this effect may run after every change to cart. The backend request should be designed carefully to avoid unnecessary requests, especially when the component is mounted, updated, or unmounted.

3) How `createAsyncThunk` uses `dispatch`

createAsyncThunk does not run the HTTP request directly from the component. The component dispatches a thunk function, and Redux Toolkit’s thunk middleware executes it.

The flow is:

The component calls dispatch(saveCart(cart)).
The thunk middleware sees that saveCart(cart) returns a function.
The middleware runs that function and gives it dispatch, getState, and other thunk arguments.
createAsyncThunk dispatches cart/saveCart/pending before running the payload creator.
The payload creator performs the HTTP request.
createAsyncThunk dispatches either cart/saveCart/fulfilled or cart/saveCart/rejected.

The thunk itself is commonly created as follows:

import { createAsyncThunk } from '@reduxjs/toolkit';

export const saveCart = createAsyncThunk(
  'cart/saveCart',
  async (cart, { rejectWithValue }) => {
    try {
      const response = await fetch('https://api.example.com/cart', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(cart),
      });

      if (!response.ok) {
        return rejectWithValue('Unable to save the cart');
      }

      return await response.json();
    } catch (error) {
      return rejectWithValue(
        error instanceof Error ? error.message : 'Unknown error'
      );
    }
  }
);

Calling the thunk action creator returns a function:

const thunk = saveCart(cart);

That returned function is what the component dispatches:

import { useDispatch } from 'react-redux';
import { saveCart } from './cartThunks';

const dispatch = useDispatch();

const handleSave = () => {
  dispatch(saveCart(cart));
};

The important distinction is that the component does not call dispatch for every lifecycle state. It dispatches the thunk once. The thunk middleware then performs the work and emits the lifecycle actions for it.

How the reducer handles those actions

The reducer can update state based on the three lifecycle actions:

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    status: 'idle',
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(saveCart.pending, (state) => {
        state.status = 'saving';
        state.error = null;
      })
      .addCase(saveCart.fulfilled, (state) => {
        state.status = 'saved';
      })
      .addCase(saveCart.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.payload as string;
      });
  },
});

The action flow is therefore:

component
  -> dispatch(saveCart(cart))
  -> thunk middleware executes saveCart(cart)
  -> dispatch(cart/saveCart/pending)
  -> payload creator performs fetch
  -> dispatch(cart/saveCart/fulfilled or cart/saveCart/rejected)
  -> reducer updates the status

4) Difference between action creators and thunks

A normal action creator should return a plain action object:

const increment = (amount: number) => ({
  type: 'counter/increment',
  payload: amount,
});

A thunk is a function that can call dispatch and getState. In the createAsyncThunk case, the generated thunk function receives those APIs from the thunk middleware:

const thunk = saveCart(cart);

// The thunk middleware calls this function internally:
// thunk(dispatch, getState, extraArgument)

The important distinction is:

action creators keep their result deterministic
thunks can perform asynchronous work and dispatch lifecycle actions afterward

5) Using a thunk inside `useEffect`

A thunk is often dispatched from a component effect when data must be saved after the Redux state changes.

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { saveCart } from './cartThunks';

export default function CartPage() {
  const cart = useSelector((state) => state.cartReducer.cart);
  const dispatch = useDispatch();

  useEffect(() => {
    if (cart.length === 0) {
      return;
    }

    dispatch(saveCart(cart));
  }, [cart, dispatch]);

  return <div>Cart</div>;
}

The component does not directly perform the HTTP request. It dispatches a thunk, and the thunk performs the asynchronous operation.

6) Summary

reducers must remain pure
side effects should be handled outside reducers
useEffect can observe selected state and perform a side effect
thunks are functions that execute asynchronously and dispatch actions
createAsyncThunk is the recommended Redux Toolkit way to create asynchronous thunks
action creators should return plain actions, while thunks can perform additional work

The main architectural rule is: reducers transform state, while side-effect systems manage network requests, timers, and other external work.

11 - React: Redux and Redux Toolkit (RTK)

Atilla Baspinar — Mon, 12 Oct 2026 14:38:20 +0000

Redux is a state management library used when application state becomes large or shared across many components.

The main idea is:

state lives in a central store
components read state through selectors
components update state by dispatching actions
reducers decide how the state changes

1) Redux basics

A reducer is a function that receives the current state and an action, then returns the next state.

const initialState = { counter: 0 };

const reducer = (prevState = initialState, action: { type: string; payload?: number }) => {
  if (action.type === 'inc') {
    return {
      ...prevState,
      counter: prevState.counter + (action.payload ?? 1),
    };
  }

  return prevState;
};

Important rule:

never mutate the existing state object
always return a new object
keep all existing keys in the returned object unless you intentionally want to remove them

Creating the store

import { createStore } from 'redux';

const store = createStore(reducer);

Providing the store to React

import { Provider } from 'react-redux';

<Provider store={store}>
  <App />
</Provider>

Reading and updating state in a component

import { useDispatch, useSelector } from 'react-redux';

function Counter() {
  const counter = useSelector((state: { counter: number }) => state.counter);
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'inc', payload: 5 });
  };

  return (
    <>
      <p>Counter: {counter}</p>
      <button onClick={increment}>+5</button>
    </>
  );
}

useSelector reads data from the Redux store.
useDispatch sends an action to the reducer.

2) Redux Toolkit

Redux Toolkit is a simpler and more structured way to write Redux.

It gives us:

createSlice
configureStore
simplified reducer logic
automatic action creators

Example: counter slice

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    counter: 0,
    show: false,
  },
  reducers: {
    increment(state) {
      state.counter += 1;
    },
    increase(state, action) {
      state.counter += action.payload;
    },
  },
});

In Redux Toolkit, the reducer functions are written in a simpler style. We do not need a large switch statement, and we do not manually return the whole state object every time.

The state is still updated immutably under the hood by Immer, which is why we can mutate the draft state directly.

Configure the store

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    counterReducer: counterSlice.reducer,
  },
});

Export actions

export const counterActions = counterSlice.actions;

Use it in a component

import { useDispatch, useSelector } from 'react-redux';
import { counterActions } from './store';

function Counter() {
  const counter = useSelector((state: any) => state.counterReducer.counter);
  const dispatch = useDispatch();

  return (
    <>
      <p>Counter: {counter}</p>
      <button onClick={() => dispatch(counterActions.increment())}>+</button>
      <button onClick={() => dispatch(counterActions.increase(5))}>+5</button>
    </>
  );
}

counterActions.increment() creates an action for the reducer, and counterActions.increase(5) sends a payload value.

3) Why Redux Toolkit is preferred

Redux Toolkit reduces boilerplate and makes Redux easier to work with.

It helps with:

fewer manual action types
less reducer boilerplate
simpler state updates
better organization for growing apps

4) Summary

Redux stores data in one central store
reducers handle state changes using actions
useSelector reads state from the store
useDispatch sends actions to update state
Redux Toolkit is the modern and easier way to use Redux

In practice, Redux Toolkit is usually the recommended choice for Redux-based apps because it keeps the same concepts but with much less code.

10 - React: Form Actions

Atilla Baspinar — Mon, 12 Oct 2026 14:35:42 +0000

Form actions are a newer React pattern for handling form submissions with server-style action functions.

The basic idea is simple: instead of wiring a form to onSubmit and manually calling preventDefault(), we give the form an action.

async function saveUser(formData: FormData) {
  const username = formData.get('username');
  console.log(username);
}

export default function FormExample() {
  return (
    <form action={saveUser}>
      <input name="username" />
      <button type="submit">Save</button>
    </form>
  );
}

In a React form action:

we typically do not call preventDefault() manually
the browser passes a FormData object to the action
the form is often reset after a successful submit

1) Basic form action behavior

A form action is useful because it gives us a more declarative submit flow.

For example:

async function submitForm(formData: FormData) {
  const username = formData.get('username');

  if (!username || typeof username !== 'string') {
    return { error: 'Username is required' };
  }

  return { success: true };
}

The handler receives the form data directly, and we can process it without writing custom submit event logic.

2) `useActionState`

useActionState is a hook for managing the state of a form action.

It helps when we want to:

keep state across submissions
return validation errors
know whether the action is pending
display form feedback after submission

import { useActionState } from 'react';

async function submitForm(prevState: { error: string | null }, formData: FormData) {
  const username = formData.get('username');

  if (!username || typeof username !== 'string' || username.trim().length < 3) {
    return { error: 'Username must be at least 3 characters long' };
  }

  return { error: null };
}

export default function FormExample() {
  const [state, formAction, isPending] = useActionState(submitForm, { error: null });

  return (
    <form action={formAction}>
      <input name="username" />
      <button disabled={isPending} type="submit">
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

The hook returns:

the current state
a wrapped action function to pass to the form
a boolean telling us whether the action is pending

Important note

The action function signature is different from a normal submit handler:

function actionHandler(previousState, formData) {
  // validate and return a new state
}

The previous state is available so the action can react to earlier values.

3) Keeping input values after submit

When the form resets after a successful submit, the UI may lose the typed values.

If we want to keep the values visible, we can include them in the returned state and use them as default values.

import { useActionState } from 'react';

type FormState = {
  error: string | null;
  username: string;
};

async function submitForm(prevState: FormState, formData: FormData): Promise<FormState> {
  const username = String(formData.get('username') ?? '');

  if (username.trim().length < 3) {
    return {
      error: 'Username must be at least 3 characters long',
      username,
    };
  }

  return {
    error: null,
    username,
  };
}

export default function FormExample() {
  const [state, formAction] = useActionState(submitForm, {
    error: null,
    username: '',
  });

  return (
    <form action={formAction}>
      <input name="username" defaultValue={state.username} />
      {state.error && <p>{state.error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

This pattern is useful when the form should preserve previous input values even after validation fails or the form resets.

4) `useFormStatus`

useFormStatus is used to read the status of the current form submission.

Important: it only works in a component that is rendered inside a form.

import { useFormStatus } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus();

  return <button disabled={pending}>{pending ? 'Submitting...' : 'Send'}</button>;
}

export default function FormExample() {
  return (
    <form action={async (formData) => {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      console.log(formData.get('username'));
    }}>
      <input name="username" />
      <SubmitButton />
    </form>
  );
}

pending becomes true while the action is running, so the button can be disabled or show loading text.

5) Multiple actions on one form

Form actions are not limited to only one submit button. We can attach different actions to different buttons.

function likeAction(formData: FormData) {
  console.log('liked');
}

function dislikeAction(formData: FormData) {
  console.log('disliked');
}

export default function VoteForm() {
  return (
    <form>
      <button type="submit" formAction={likeAction}>Upvote</button>
      <button type="submit" formAction={dislikeAction}>Downvote</button>
    </form>
  );
}

This is useful when a form can trigger different actions depending on which control submits it.

6) Summary

form actions are a React pattern for declarative submission handling
useActionState manages state and pending status for form actions
the action receives FormData
actions can return validation state or other UI state
useFormStatus lets a nested button know whether a form is currently submitting
multiple submit buttons can trigger different actions with formAction

This pattern is especially useful in newer React apps when you want a more server-action-like form flow.

09 - React: handling forms

Atilla Baspinar — Mon, 12 Oct 2026 14:35:00 +0000

Form handling usually has two main concerns:

form submission
form validation

A form in HTML submits automatically when the user clicks a submit button. In React, we usually prevent that default behavior and handle submission ourselves.

1) Form submission

By default, a button inside a form submits the form and refreshes the page. That is usually not what we want in React.

Option 1: use a button with `type="button"`

<button type="button" onClick={() => console.log('clicked')}>Save</button>

This prevents the browser from submitting the form.

Option 2: handle the form submit event

<form onSubmit={handleSubmit}>
  <input name="username" />
  <button type="submit">Submit</button>
</form>

Then in the handler:

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  console.log('Form submitted');
};

This is the most common pattern in React apps.

React 19: form actions

React 19 introduces the idea of form actions as a newer pattern. In simple terms, the form can be submitted with server-like action handling instead of only onSubmit.

This is a newer approach, but the classic onSubmit + event.preventDefault() pattern is still the most common and easiest to understand when learning React.

2) Getting form values

There are several common ways to read form field values.

A) With state

This is the most common pattern for controlled inputs.

import { useState } from 'react';

export default function FormExample() {
  const [name, setName] = useState('');

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log('Submitted name:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="Type your name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

This is useful when we want to validate on every keystroke, show instant feedback, or use the value in the current render.

B) With refs

Refs are useful when we want to read values only when the form is submitted.

import { useRef } from 'react';

export default function FormExample() {
  const nameRef = useRef<HTMLInputElement | null>(null);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log('Submitted name:', nameRef.current?.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} placeholder="Type your name" />
      <button type="submit">Submit</button>
    </form>
  );
}

This pattern is less reactive, but it can be useful when we want less re-rendering and less state management.

C) With `FormData`

A very convenient pattern is to use the browser FormData API.

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();

  const formData = new FormData(event.currentTarget);
  const data = Object.fromEntries(formData.entries());

  console.log(data);
};

Important: each input should have a name attribute so the values can be collected.

<form onSubmit={handleSubmit}>
  <input name="username" />
  <input name="email" />
  <button type="submit">Submit</button>
</form>

This is a simple and clean way to collect all field values in one object.

3) Resetting the form

There are a few common ways to clear a form after submit.

Reset the form element directly

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  event.currentTarget.reset();
};

This resets the DOM input values.

Use a reset button

<form>
  <input name="username" />
  <button type="reset">Reset</button>
</form>

This is useful when you want the browser to reset the fields automatically.

4) Form validation

Validation is about checking whether the user input is valid before we submit or save it.

There are two common approaches:

validation with component state
validation using refs or manual checks during submit

Validation with state

This is useful for real-time validation.

import { useState } from 'react';

export default function SignupForm() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (name.trim().length < 3) {
      setError('Name must be at least 3 characters long');
      return;
    }

    setError('');
    console.log('Valid form');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      {error && <p>{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

This pattern lets us validate as the user types and show error messages immediately.

Custom validation logic

Custom logic is usually written as plain JavaScript checks in the submit handler or in helper functions.

Examples:

minimum length
required field
email format
password strength

Built-in validation

HTML also supports built-in browser validation using attributes such as:

required
minLength
type="email"
pattern

<form>
  <input name="email" type="email" required />
  <button type="submit">Submit</button>
</form>

This is simple and useful for basic validation, but React state validation is often more flexible for custom UX.

5) Summary

forms submit by default, so use event.preventDefault() when needed
use onSubmit for form submission handling
read values with state, refs, or FormData
reset form values with event.currentTarget.reset() or a reset button
validate either with custom code or built-in HTML validation

A good rule is:

use controlled state for interactive validation and live UI
use FormData for simple submit-time gathering
use refs when you want less re-rendering and less state tracking

08 - React: custom hooks

Atilla Baspinar — Mon, 12 Oct 2026 14:34:18 +0000

A custom hook is just a function whose name starts with use and that contains reusable React logic.

The main idea is to extract logic that is shared across components so we do not duplicate the same state and effects in multiple places.

Custom hooks can be used:

directly inside a component
inside another custom hook

As long as the hook follows the Rules of Hooks, it works the same way as built-in hooks.

1) Why custom hooks are useful

If several components need the same behavior, we can move that behavior into a custom hook.

Examples:

fetching data
managing a form
handling local storage
tracking window size
timer logic

This makes the component code cleaner and more reusable.

2) State inside a custom hook

A custom hook often uses useState, useEffect, or other hooks internally.

The important fact is:

state created inside a custom hook is still part of the calling component's React state lifecycle
updating that state causes the component to re-render, just like normal state in a component

import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

export default function App() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </>
  );
}

This hook encapsulates the counter logic in one place and can be reused anywhere.

3) Returning state and setter functions

A custom hook usually returns values that the component can use.

For example, a hook can return:

state value
setter function
computed values
helper functions

import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => setValue((prev) => !prev);
  const open = () => setValue(true);
  const close = () => setValue(false);

  return { value, toggle, open, close };
}

export default function App() {
  const { value, toggle, open, close } = useToggle(false);

  return (
    <>
      <p>{value ? 'Open' : 'Closed'}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={open}>Open</button>
      <button onClick={close}>Close</button>
    </>
  );
}

The set function can be used outside the custom hook, and when it updates the state, the component re-renders normally.

4) Important rule

A custom hook must itself follow the Rules of Hooks.

That means it can call hooks, but it must be used at the top level of a component or another custom hook, not inside a conditional or loop.

5) Summary

custom hooks are reusable pieces of React logic
they are useful for extracting repeated state/effect logic
they can call hooks like useState and useEffect
state inside a custom hook behaves like normal component state
return the values the component needs, such as state and update functions

This is one of the core patterns for writing cleaner React code: move repeatable logic into a hook, then use it in multiple components.

07 - React: handling http with useEffect

Atilla Baspinar — Mon, 12 Oct 2026 14:33:31 +0000

A common pattern in React is to fetch data when a component mounts.

This usually means we need three state values:

loading: whether the request is in progress
error: whether something went wrong
data: the result of the request

import { useEffect, useState } from 'react';

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

export default function PostList() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        setLoading(true);
        setError(null);

        const response = await fetch('https://jsonplaceholder.typicode.com/posts');

        if (!response.ok) {
          throw new Error(`Request failed with status ${response.status}`);
        }

        const data = (await response.json()) as Post[];
        setPosts(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Something went wrong');
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <strong>{post.title}</strong>
        </li>
      ))}
    </ul>
  );
}

1) Why this pattern is useful

We use useEffect here because the request is a side effect: it happens after the component renders.

The flow is:

component renders
useEffect starts the request
while loading, we show a loading state
if the request fails, we set an error message
after success or failure, we stop loading

2) Error handling

There are two common cases where a fetch can fail:

the network request itself throws an error
the server responds with a non-OK status, such as 404 or 500

Both cases should be handled in a try/catch block.

const response = await fetch(url);

if (!response.ok) {
  throw new Error(`Request failed with status ${response.status}`);
}

This makes the error explicit and lets the catch block handle both kinds of errors consistently.

3) `finally`

finally runs no matter whether the request succeeds or fails.

This is the best place to stop the loading state:

} finally {
  setLoading(false);
}

That way, the UI always exits the loading state after the request completes.

4) Summary

When fetching data in React:

create loading, error, and data state
start the request in useEffect
use try/catch to handle failures
manually throw when the HTTP response is not ok
stop loading in finally

This pattern is the standard starting point for working with async data in React components.

06 - React: memo, useCallback, and useMemo

Atilla Baspinar — Mon, 12 Oct 2026 14:32:12 +0000

These tools are about performance optimization, but they are only useful when you have a real problem to solve.

A good rule is:

first write clear code
then optimize only if profiling or a real bottleneck shows you need it

1) `memo`

memo is a higher-order component that tells React:

"If the props for this component did not change, do not re-render it just because its parent re-rendered."

import { memo } from 'react';

const Counter = memo(function Counter({ initialCount }: { initialCount: number }) {
  console.log('Counter rendered');

  return <div>Count: {initialCount}</div>;
});

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

  return (
    <>
      <button onClick={() => setCount((prev) => prev + 1)}>Update parent</button>
      <Counter initialCount={0} />
    </>
  );
}

In this example, the parent state changes, but the Counter prop value stays the same. Because the props did not change, React can skip re-rendering the child component.

This is useful when the child is expensive to render and the input props are unchanged.

Important note

Before using memo, check whether the component structure can be improved.

Sometimes the better solution is to move the state lower in the tree or split the component into smaller pieces, instead of adding optimization too early.

2) `useCallback`

useCallback is used to keep a function reference stable across renders.

This matters when a child component is wrapped in memo and receives a function as a prop.

Without useCallback, the function is recreated every render, so React sees a new prop value and may re-render the child.

import { memo, useCallback, useState } from 'react';

const ButtonRow = memo(function ButtonRow({
  onClick,
}: {
  onClick: () => void;
}) {
  console.log('ButtonRow rendered');

  return <button onClick={onClick}>Click me</button>;
});

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

  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return (
    <>
      <p>Parent count: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Update parent</button>
      <ButtonRow onClick={handleClick} />
    </>
  );
}

Here, handleClick is stable because it is wrapped in useCallback. Since the function reference does not change, the memoized child does not re-render unnecessarily.

When to use it

Use useCallback when:

a child is memoized
a function is passed as a prop
the function is expensive or created repeatedly

Important detail

State setter functions from useState are already stable and do not need to be wrapped in useCallback.

3) `useMemo`

useMemo is used to memoize a value, not a component.

A common use case is when an object or array is created during render and then passed as a prop to a memoized child.

If the object is recreated on every render, the child sees a new reference and may re-render even if the contents are conceptually the same.

import { memo, useMemo, useState } from 'react';

const UserCard = memo(function UserCard({
  user,
}: {
  user: { name: string; age: number };
}) {
  console.log('UserCard rendered');

  return <div>{user.name} ({user.age})</div>;
});

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

  const user = useMemo(
    () => ({ name: 'Ali', age: 25 }),
    []
  );

  return (
    <>
      <button onClick={() => setCount((prev) => prev + 1)}>Update parent</button>
      <UserCard user={user} />
    </>
  );
}

The object user is created once and kept stable by useMemo. This helps prevent unnecessary re-renders of UserCard.

Summary of the pattern

memo prevents re-rendering of a component when props do not change
useCallback keeps function references stable
useMemo keeps object/array references stable

These are optimization tools, not default patterns you need everywhere.

4) Forcing a rerender with `key`

When a component is wrapped with memo, React may skip re-rendering it if the props are unchanged.

If you want React to treat it as a fresh component instance, you can change its key.

<Counter key={initialCount} initialCount={initialCount} />

Changing the key tells React that this is a different element instance, so it will re-render it.

This is useful when you intentionally want a component to reset or rebuild.

5) Summary

memo optimizes component rendering when props stay the same
useCallback stabilizes function props
useMemo stabilizes object or array values
use these only when needed; do not add them everywhere without a reason
key is a separate tool for forcing a component to remount or rerender

The main idea is simple: memoization helps avoid unnecessary work when the inputs have not changed. It is a performance tool, not a replacement for bad component structure or unnecessary state.

05 - React: useEffect

Atilla Baspinar — Mon, 12 Oct 2026 14:28:07 +0000

This tutorial focuses on one important hook: useEffect.

1) What `useEffect` does

useEffect runs after React has rendered the component and committed the DOM updates.

That means it is not part of the render itself. It runs after the UI has been painted, which makes it a good place for:

fetching data
subscribing to events
starting timers
cleaning up resources

Important timing rule

useEffect runs:

once after the initial render
again whenever one of its dependencies changes

import { useEffect, useState } from 'react';

export default function TimerExample() {
  const [count, setCount] = useState(0);
  const [userId, setUserId] = useState(1);

  useEffect(() => {
    console.log('Effect runs after render for user:', userId);

    const timer = window.setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);

    return () => {
      console.log('Cleanup runs before the next effect or before unmount');
      window.clearInterval(timer);
    };
  }, [userId]);

  return (
    <>
      <p>User: {userId}</p>
      <p>Seconds: {count}</p>
      <button onClick={() => setUserId((prev) => prev + 1)}>Next user</button>
    </>
  );
}

What happens in this example?

On the first render, the effect runs after the component is mounted.
It creates a timer and starts counting.
When userId changes, React runs the cleanup function from the previous effect.
Then React runs the new effect for the updated value.
When the component unmounts, the cleanup still runs one final time.

2) Cleanup function

If the effect returns a function, that function is treated as cleanup.

React runs cleanup:

before the next effect runs
before the component is removed from the DOM

This is important because cleanup is where we usually stop timers, unsubscribe from listeners, and release resources.

useEffect(() => {
  const subscription = someEventSource.subscribe();

  return () => {
    subscription.unsubscribe();
  };
}, [someValue]);

In short:

effect = setup work
cleanup = teardown work

3) Dependency array

The second argument to useEffect is the dependency array.

useEffect(() => {
  // runs when dependencies change
}, [value1, value2]);

[] means run only once after mount
[value] means run again whenever value changes
no dependency array means it runs after every render

Important: a function in the dependency array can be a problem, especially when that function is passed as a prop.

If the parent component recreates the function on every render, the dependency changes and React will run the effect again.

This is often the reason people use useCallback: to keep a function reference stable unless its real dependencies change.

One useful rule to remember is that state setter functions from useState are stable and do not need to be wrapped in useCallback.

import { useCallback, useEffect, useState } from 'react';

function Child({ onSave }: { onSave: () => void }) {
  useEffect(() => {
    onSave();
  }, [onSave]);

  return <div>Saved</div>;
}

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

  const handleSave = useCallback(() => {
    console.log('saved', count);
  }, [count]);

  return <Child onSave={handleSave} />;
}

In this example, handleSave is recreated only when count changes. That keeps the dependency list honest and avoids unnecessary effect re-runs.

4) Summary

useEffect runs after render, not during render
it runs at least once after mount
it runs again when its dependencies change
if it returns a cleanup function, that cleanup runs before the next effect and before unmount

This is the key mental model to remember:

render decides what UI should look like
effect handles side effects after the render is committed

DEV Community: Atilla Baspinar

Create a AI customer service using LangChain

What we're building: a multimodal customer-service agent

Build the customer-service agent

How the tech works

Multimodal messages

Base64 encoding

Conversation memory

Model and media support

A quick privacy reminder

Further reading

15 - React: Rendering component dynamically

14 - React Router: actions, forms, and submission

1. Defining a route action

2. Form element

3. useSubmit

4. useNavigation

5. useActionData

6. useFetcher

7. Await

Summary

13 - React Router: Data Mode

1. Creating a router

2. Navigation with Link and NavLink

3. Nested routes and layouts

4. Programmatic navigation with useNavigate

5. Dynamic routes

6. Loaders

useRouteLoaderData

Returning a Response

7. Loader errors and errorElement

8. Tracking navigation state with useNavigation

Summary

12 - React: Redux advanced topics

1) Keeping reducers pure

2) Handling side effects with useEffect

3) How createAsyncThunk uses dispatch

How the reducer handles those actions

4) Difference between action creators and thunks

5) Using a thunk inside useEffect

6) Summary

11 - React: Redux and Redux Toolkit (RTK)

1) Redux basics

Creating the store

Providing the store to React

Reading and updating state in a component

2) Redux Toolkit

Example: counter slice

Configure the store

Export actions

Use it in a component

3) Why Redux Toolkit is preferred

4) Summary

10 - React: Form Actions

1) Basic form action behavior

2) useActionState

Important note

3) Keeping input values after submit

4) useFormStatus

5) Multiple actions on one form

6) Summary

09 - React: handling forms

1) Form submission

Option 1: use a button with type="button"

Option 2: handle the form submit event

React 19: form actions

2) Getting form values

A) With state

B) With refs

C) With FormData

3) Resetting the form

Reset the form element directly

Use a reset button

4) Form validation

Validation with state

Custom validation logic

Built-in validation

5) Summary

08 - React: custom hooks

1) Why custom hooks are useful

2. `Form` element

3. `useSubmit`

4. `useNavigation`

5. `useActionData`

6. `useFetcher`

7. `Await`

2. Navigation with `Link` and `NavLink`

4. Programmatic navigation with `useNavigate`

`useRouteLoaderData`

Returning a `Response`

7. Loader errors and `errorElement`

8. Tracking navigation state with `useNavigation`

2) Handling side effects with `useEffect`

3) How `createAsyncThunk` uses `dispatch`

5) Using a thunk inside `useEffect`

2) `useActionState`

4) `useFormStatus`

Option 1: use a button with `type="button"`

C) With `FormData`

3) `finally`

1) `memo`

2) `useCallback`

3) `useMemo`

4) Forcing a rerender with `key`

1) What `useEffect` does