I’m relatively new to both SSR & the useTransition react hook.
Can someone please explain why an onClick callback as defined below only works inside a startTransition?
<code>'use client';
const [isPending, startTransition] = useTransition();
const _skipAction = useCallback((e: React.MouseEvent) => {
e.preventDefault();
// This works
startTransition(async () => {
redirect('/');
});
// This doesn't work - click event is ignored
// redirect('/');
}, []);
</code>
<code>'use client';
const [isPending, startTransition] = useTransition();
const _skipAction = useCallback((e: React.MouseEvent) => {
e.preventDefault();
// This works
startTransition(async () => {
redirect('/');
});
// This doesn't work - click event is ignored
// redirect('/');
}, []);
</code>
'use client';
const [isPending, startTransition] = useTransition();
const _skipAction = useCallback((e: React.MouseEvent) => {
e.preventDefault();
// This works
startTransition(async () => {
redirect('/');
});
// This doesn't work - click event is ignored
// redirect('/');
}, []);
After playing around with next.js for a while, I have gotten some further clarity on things. There still has to be a better solution but since routing in next.js is handled on the server side, setTransition allows the app to switch context when inside a client component.