The page.jsx is already a server component by default

You can switch in between forms using client-components. Im not sure how you could do it in raw html

Yeah, I have 3 forms which are all client-components, and I added useEffect() to page.jsx to change forms to show by the anchor tag added in each forms.

If you have separate route for all thsoe 3 form, then yes, just use <a> and i dont think the useEffect() is necessary

For example, in sign-in.jsx, I have form and a link(<a href="#sign-up">) to change form to sign-up.

Oh, can I just change forms without useEffect() or useState() ?

IF you have separate route

like /sign-in /sign-up and /forgot-password

If I separate the route, then I would see the blinking when I change forms, right?

yep

so client component is better for your case

you'd need a useState to keep track which form the user is currently at

I'm using client component and I'm still seeing blinking. When I put every forms in one client component and change forms by useState(), I didn't see the blinking, but I want to separate forms for validation, and now I'm seeing blinking..

pseudocode:

'use client'

Form():

const [formType, setFormType] = useState(0)

if user click on sign-in then onClick={()=>setFormType(0)}
if user click on sign-up then onClick={()=>setFormType(1)}
if user click on forgot-password then onClick={()=>setFormType(2)}

then on the render return
if formType===0 <SignIn>
if formType===1 <SignUp>
if formType===2 <ForgotPassword>

the blinking might be caused by other stuff

export default function Login() {
const [activeForm, setActiveForm] = useState("sign-in");

useEffect(() => {
const handleHashChange = () => {
const hash = window.location.hash.substr(1);
setActiveForm(hash || 'sign-in');
};

window.addEventListener('hashchange', handleHashChange);
handleHashChange(); // Initial check

return () => {
window.removeEventListener('hashchange', handleHashChange);
};
}, []);

return (
<div>
{activeForm === 'sign-in' && <SignInForm />}
{activeForm === 'sign-up' && <SignUpForm />}
{activeForm === 'forgot-password' && <ForgotPasswordForm />}
</div>
);

this is the page.jsx

use code block please

Sorry

export default function Login() {
    const [activeForm, setActiveForm] = useState("sign-in");

    useEffect(() => {
        const handleHashChange = () => {
            const hash = window.location.hash.substr(1);
            setActiveForm(hash || 'sign-in');
        };

        window.addEventListener('hashchange', handleHashChange);
        handleHashChange(); // Initial check

        return () => {
            window.removeEventListener('hashchange', handleHashChange);
        };
    }, []);

    return (
        <div>
            {activeForm === 'sign-in' && <SignInForm />}
            {activeForm === 'sign-up' && <SignUpForm />}
            {activeForm === 'forgot-password' && <ForgotPasswordForm />}
        </div>
    );

no worries

I want change forms without blinking like this next.js page (https://www.greatfrontend.com/login)

you should really try having them as separate routes then click through them all and then navigate again and you'll see it's instant

Alright I will try it quickly, I might need to use Link instead of a tag right?
Besides this, I'm quite wondering how can https://www.greatfrontend.com/login this page could make it without separating routes. This page is made with Next.js too.

all i see is a login

i see, sign in/sign up. yes, they are just doing a client side change like you had in your example code

Yeah, but mine blinks.. I could make like this page if I put every form in a one client component. But I want to separate forms.. I'm trying to separate routes and I will see the result.

can you tell me what you mean by blink

If I click <a href="#sign-up"> text </a> in the sign-in page, the buttons and icons are blink once.

ok i think that might be because you're using an anchor tag which i think reloads the page

you could try changing it from an anchor tag to a button and see if that fixes it

Alright I will try it

I tried to change a tag to button, but same. I think only svg icons are blinking.

since a tag will trigger full page reload i wouldnt recommend it :v

or reload.refresh in that matter

try with <Link> ?

using Link means separating routes, right?

yes

but if you don't want then client components would be another way to approach this

Yeah, I don't mind if it's client component or server component. I just want to separate form files without separating routes, and without blinking when I change forms. Thank you for your help btw.

perhaps you can show how it would flash if using a client component

The above video I shared is using client component.

Try moving the google and github button up in the <Form> component

They were outside of <Form> component.

thats weird, it shouldnt flicker like that lol