Styled div re-rerendering when it shouldn't?

[sebpowell]

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.

[sebpowell]

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.