Component rendering twice

lofiguy · July 1, 2025, 4:54pm

Hello,

I have an issue that is consistent throughout my entire application.

In all my forms, the component rendering the form that has useActionState renders twice, because I simply have a console log in the function’s body, and it pops up twice.

It wasn’t necessarily an issue until I started putting in toast success messages.

gist.github.com

https://gist.github.com/0xMatt/48042ead019bba5c5c49d2b964d39bfc#file-contact-tsx-L22-L25

Contact.tsx

'use client';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Send } from 'lucide-react';
import { useActionState } from 'react';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import Form from 'next/form';
import { contact } from '@/app/contact/actions';

This file has been truncated. show original

actions.ts

'use server';

import { ContactActionResponse, ContactForm, ContactSchema } from '@/app/contact/definitions';

export async function contact(
  prevState: ContactActionResponse | null,
  formData: FormData,
): Promise<ContactActionResponse> {
  const rawData: ContactForm = {
    name: formData.get('name') as string,

This file has been truncated. show original

definitions.ts

import { z } from 'zod';

export interface ContactForm {
  name: string;
  email: string;
  message: string;
}
export interface ContactActionResponse {
  success: boolean;
  message: string;

This file has been truncated. show original

There are more than three files. show original

I have highlighted the lines that are logged twice. Upon load of the page, the console log shows up twice. When I submit the form, the toast appears twice.

Any ideas on how I can go about troubleshooting this?

I’ve went and started from the root layout and all sub layouts wrapping around {children}.

Every component that has ‘use client’ renders twice based off a console.log.

If it helps any better, I do have the full source code public on github. GitHub - 0xMatt/javelet.dev: personal portfolio/resume website build with nextjs, react and tailwindcss.

lofiguy · July 1, 2025, 6:03pm

Nermind, this was caused by react strict mode.

It would be nice to know how to avoid getting two toast messages with it in this mode, but for the time being I’m just disabling it.

jacobparis · July 1, 2025, 6:46pm

StrictMode emulates edge cases in React where an effect can re-run a second time with the same state/props, which can happen in React 19 for example using the Activity API (formerly react offscreen API)

The right fix is to make sure that even if the effect runs twice, it doesn’t create two toasts, and with sonner the way you do that is to assign an ID to it

Here’s a relevant GitHub issue with a fix

github.com/emilkowalski/sonner

Two toasts appear when displaying toast from a `useEffect()` in strict mode

opened 11:25PM - 02 Feb 24 UTC

closed 12:26PM - 08 Feb 25 UTC

markmiro

### Describe the feature / bug 📝: Two toasts appear when running in strict mo…de. I understand that usually toasts shouldn't be rendered via a `useEffect`. In my case I have a hook called `useNotifications` that returns a count. And it also shows toasts corresponding to the notifications. ### Steps to reproduce the bug 🔁: ```tsx // double-toast.tsx import {toast} from 'sonner' export function DoubleToast() { const [count, setCount] = useState(0) useEffect(() => { // BUG: two toasts appear const id = toast('count: ' + count) return () => toast.dismiss(id) }, [count]) return <button onClick={() => setCount((c) => c + 1)}>+1</button> } ``` ```tsx import React from 'react' import {DoubleToast} from './double-toast.tsx' const rootEl = document.getElementById('root'); ReactDOM.createRoot(rootEl).render( <React.StrictMode> <DoubleToast /> </React.StrictMode>, ) ```

system · July 8, 2025, 6:47pm

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Page re-renders on global state update (using Zustand.js) Help nextjs	3	75	April 24, 2025
Cached function in layout and page runs twice Help	1	11	September 18, 2024
NextJs >=15.2.2 broke server action calls from client component Help nextjs	1	34	June 17, 2025
Re-Render Client Component When Parent Server Component Receives Data Help nextjs	2	32	December 26, 2024
Next.js 14 App Router: Code after return still executing, causing unexpected behavior Help	1	34	October 18, 2024

Component rendering twice

Related topics