Form-SubmitButton-UseStore
const form = useFormContext();
const [isSubmitting, canSubmit] = useStore(form.store, (state) => [
state.isSubmitting,
state.canSubmit,
]);
return (
<ActionButton
type={type}
disabled={isSubmitting !canSubmit disabled}
className={className}
isLoading={isSubmitting || isLoading}
{...props}
>
{children}
</ActionButton> The Balastrong YouTube video recommends one way, but the documentation follows another way of creating a button component. Which one is better? Can I use the useStore hook inside the Button component? function SubscribeButton({ label }: { label: string }) {
const form = useFormContext()
return (
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => <button disabled={isSubmitting}>{label}</button>}
</form.Subscribe>
)
}
11 Replies
ratty-blush•8mo ago
There shouldn't be a "better" one, they are just wrappers around the store afaik.
You can choose freely which one to use
evident-indigoOP•8mo ago
but Do these two do the same work?
ratty-blush•8mo ago
Yes, they make sure the values are reactive (not stale)
ambitious-aqua•8mo ago
well, the first one checks for two values instead of just one, but yes they are both reactive
evident-indigoOP•8mo ago
Can we use the useStore hook inside the Button component?
ambitious-aqua•8mo ago
do you have an example?
the second code snippet?
if so, wherever you can use react hooks, you can use
useStoreevident-indigoOP•8mo ago
export const FormButton = ({
children,
className,
disabled,
type = "submit",
...props
}: FormButtonProps) => {
const form = useFormContext();
const [isSubmitting, canSubmit] = useStore(form.store, (state) => [
state.isSubmitting,
state.canSubmit,
]);
return (
<Button
type={type}
disabled={isSubmitting !canSubmit disabled}
className={className}
{...props}
>
{children}
</Button>
);
};
In my example code, I use the useStore hook directly without form.subscribe. My question is: Can we use the useStore hook in the Button component without using form.subscribe?
ratty-blush•8mo ago
yes, lgtm
evident-indigoOP•8mo ago
Lgtm mean?
ambitious-aqua•8mo ago
„looks good to me“
evident-indigoOP•8mo ago
Okay