title: REACT : Error: Rendered fewer hooks than expected. This may be caused by an
body: <p>i have a problem i have the famous react error : Uncaught (in promise) Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.</p>
  <p>But i'm looking for the issue but i didnt find because i think my hooks order are well but its not the case.... Do you have an idea where is the mistake?</p>
  <p>Thanks</p>
  <pre><code>import { useNavigate, Link, useParams } from 'react-router-dom';
      import { useEffect, useState, useCallback, useMemo } from 'react';
      import { Formik } from 'formik';
      import { useIntl, FormattedMessage } from 'react-intl';
      import { useQuery, gql, useMutation } from '@apollo/client';
      import { sub } from 'date-fns';
      
      import {
        Text,
        Button,
        TextField,
        DateField,
        Banner,
        Loader,
        Icon,
      } from '@customer-portal/components';
      
      import { StandardField } from '../../components/FormikFields';
      import { useError } from '../../hooks/useError';
      import { toISODate, toStartOfDay } from '../../utils/date';
      import { useFilteredContracts } from '../../components/ContractsFilter';
      
      export function MeterReadingToEnterForm() {
        const [date, setDate] = useState();
        const [forceResult, setForceResult] = useState(false);
        const [successBanner, setSuccessBanner] = useState(false);
        let navigate = useNavigate();
        let { serial } = useParams();
        const intl = useIntl();
        const contract = useFilteredContracts();
        const initialValues = {};
        const getError = useError(error);
      
        useEffect(() =&gt; {
          return () =&gt; {
            navigate('/meter-reading');
          };
        }, [contract.id]);
      
        const {
          loading,
          data: queryData,
          error,
          refetch,
        } = useQuery(QUERY, {
          notifyOnNetworkStatusChange: true,
          fetchPolicy: 'network-only',
          variables: {
            date: toStartOfDay(Date.now()),
            contractId: contract.id,
          },
        });
      
        const [enterMeterReading, { loading: enterLoading, error: enterError }] =
          useMutation(MUTATION_QUERY, {
            onCompleted: () =&gt; setSuccessBanner(true),
          });
      
        useEffect(() =&gt; {
          refetch({ variables: { date: toStartOfDay(date) } });
        }, [date]);
      
        if (error) {
          return (
            &lt;Banner data-test=&quot;BannerNoContracts&quot; type=&quot;error&quot; iconName=&quot;Alert&quot;&gt;
              &lt;Text&gt;{getError()}&lt;/Text&gt;
            &lt;/Banner&gt;
          );
        }
      
        if (enterError) {
          return (
            &lt;Banner type=&quot;error&quot; iconName=&quot;Alert&quot;&gt;
              &lt;Text&gt;{getError()}&lt;/Text&gt;
            &lt;/Banner&gt;
          );
        }
      
        const formattedValues = (valeur) =&gt; {
          let array = Object.keys(valeur).map((key) =&gt; ({
            id: key,
            result: valeur[key],
          }));
          return array;
        };
      
        const handle = useCallback((values) =&gt; {
          mutationQuery({
            variables: {
              data: {
                serial: serial,
                results: formattedValues(values),
              },
              Id: id,
            },
           refetchQueries: ['newQuery'],
          });
        });
      
        return (
          &lt;div sx={{ display: 'flex', flexDirection: 'column', width: '100%', p: 2 }}&gt;
            &lt;div sx={{ display: 'flex', pt: 6, width: '100%' }}&gt;
              &lt;Icon
                sx={{ display: 'flex', alignItems: 'center', m: 3 }}
                color=&quot;primary&quot;
                name=&quot;Counter&quot;
                size=&quot;large&quot;
              /&gt;
              &lt;Text weight=&quot;bold&quot; sx={{ display: 'flex', alignItems: 'center' }}&gt;
                &lt;FormattedMessage
                  defaultMessage=&quot;N° {number}&quot;
                  values={{
                    number: `${serial}`,
                  }}
                /&gt;
              &lt;/Text&gt;
            &lt;/div&gt;
            {successBanner &amp;&amp; (
              &lt;div sx={{ mb: 4 }}&gt;
                &lt;Banner
                  iconName=&quot;SuccessOutline&quot;
                  type=&quot;success&quot;
                &gt;
                  &lt;Text&gt;
                    &lt;FormattedMessage
                      defaultMessage=&quot;Done&quot;
                    /&gt;
                  &lt;/Text&gt;
                &lt;/Banner&gt;
              &lt;/div&gt;
            )}
            &lt;div sx={{ display: 'flex', justifyContent: 'flex-start', py: 2 }}&gt;
              &lt;DateField
                name=&quot;datefoield&quot;
                value={date || Date.now()}
                onChange={(date) =&gt; setDate(date)}
                required={true}
                label={intl.formatMessage({
                  defaultMessage: 'Date du relevé',
                })}
                defaultSelected={date}
                disabledDays={[
                  {
                    before: sub(new Date(toISODate(Date.now())), {
                      days: 60,
                    }),
                  },
                  {
                    after: new Date(Date.now()),
                  },
                ]}
              /&gt;
            &lt;/div&gt;
            {enterLoading &amp;&amp; &lt;Loader type=&quot;radiance&quot; overlay={true} /&gt;}
            {loading ? (
              &lt;Loader sx={{ mx: [0, 11] }} /&gt;
            ) : (
              &lt;Formik
                onSubmit={handleEnterMeterReading}
                initialValues={initialValues}
              &gt;
                {({ values, handleSubmit }) =&gt; {
                  const query = useMemo(() =&gt; {
                    return queryDatafind(
                      (serialNumber) =&gt; serialNumber === serial
                    );
                  }, [queryData]); 
      
                  return (
                    &lt;form
                      noValidate={true}
                      onSubmit={handleSubmit}
                    &gt;
                      &lt;div
                        sx={{
                          display: 'flex',
                          flexWrap: 'wrap',
                          width: '100%',
                          py: 2,
                        }}
                      &gt;
                        {query.map((value) =&gt; (
                          &lt;div sx={{ mr: 4 }}&gt;
                            &lt;StandardField
                              as={TextField}
                              id={id}
                              label={label}
                              required
                              name={id}
                              size=&quot;standard&quot;
                              type=&quot;number&quot;
                              variant=&quot;standard&quot;
                            /&gt;
                          &lt;/div&gt;
                        ))}
                      &lt;/div&gt;
                      &lt;div sx={{ display: 'flex', py: 6 }}&gt;
                        &lt;Link to=&quot;/&quot;&gt;
                          &lt;Button
                            sx={{ my: 4, mr: 4 }}
                            startIcon=&quot;ErrorOutline&quot;
                            size=&quot;standard&quot;
                            variant=&quot;outlined&quot;
                          &gt;
                            {intl.formatMessage({
                              defaultMessage: 'Annuler',
                            })}
                          &lt;/Button&gt;
                        &lt;/Link&gt;
                        &lt;Button
                          sx={{ whiteSpace: 'nowrap', my: 4 }}
                          startIcon=&quot;SuccessOutline&quot;
                          size=&quot;standard&quot;
                          type=&quot;submit&quot;
                          disabled={loading}
                        &gt;
                          {loading
                            ? intl.formatMessage({
                                defaultMessage: 'loading',
                              })
                            : intl.formatMessage({
                                defaultMessage: 'Validate',
                              })}
                        &lt;/Button&gt;
                      &lt;/div&gt;
                    &lt;/form&gt;
                  );
                }}
              &lt;/Formik&gt;
            )}
          &lt;/div&gt;
        );
      }
      
  
  -- GRAPHQL REQUEST---
  </code></pre>