Styled div re-rerendering when it shouldn't?
sebpowell opened this issue · comments
Bug report
Describe the bug
Something extremely strange – which might just be me doing something stupid, but I can't for the life of me see what I'm doing wrong.
Consider the following code:
export const Login = () => {
const dispatch = useDispatch();
const StyledPanel = styled("div");
const { loginError, loginSuccess, isSubmitting, isAuthenticated } =
useSelector((state: RootState) => {
return state.session;
});
const onSubmit = async (values: LoginRequestDto) => {
await dispatch(login(values));
};
return (
<div className="flex items-center justify-center w-screen h-screen background">
<StyledPanel className="test">
<div className="w-full p-6 mx-auto rounded-lg md:max-w-sm">
<FormikForm<LoginRequestDto>
onSubmit={(values) => onSubmit(values)}
validation={LoginRequestSchema}
initialValues={{
user_email: "",
user_password: "",
}}
>
{({ isValid }) => {
return (
<>
<Stack>
<FormikField<LoginRequestDto> name={"user_email"}>
{({
onChange,
value,
isInvalid,
errorMessage,
name,
}) => {
return (
<FormControl
label="Email"
htmlFor={name}
errorMessage={errorMessage}
isInvalid={isInvalid}
>
<Input
id={name}
type="email"
size="md"
disabled={isSubmitting}
name={name}
value={value}
onChange={(e) => onChange(e.target.value)}
autoFocus={true}
/>
</FormControl>
);
}}
</FormikField>
</Stack>
<Button
isLoading={isSubmitting}
type="submit"
size="md"
isBlock
colorScheme="primary"
>
Login
</Button>
</>
);
}}
</FormikForm>
</div>
</StyledPanel>
</div>
);
};
StyledPanel is a styled
div. When I submit the form, I update my Redux store. This in turn appears to trigger a re-render of everything inside StyledPanel. Removing StyledPanel fixed the problem, so it seems to be something specific to Stitches.
Any ideas what I'm doing wrong?
If necessary I'll post a CodePen, but maybe someone can see what I'm missing. Any help would be greatly appreciated.
Found the problem – stupid mistake, I was defining StyledPanel inside the component, so of course it was re-rendering every time a state change happened 🤦 Moving it outside the component fixed things.