useEffect in nextjs not rendering in deployed Website, but In Local it rendered

30 Views Asked by At

I'm using nextjs 13. I have this code, if I dont use the useEffect, the date will set to default 30 November 1899 when page reload. The useEffect is not rendered in deployed version, but it works in my local. I'm using AWS

When I use the useEffect, The date will change to today date. The problem is, the useEffect is rendered and succesfully set the date to today date in my local. but when it's deployed to server, the useEffect is not rendered and the date still 30 November 1899.

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import React, { useState, useEffect } from 'react';
import { Controller, useFormContext } from 'react-hook-form';

 useEffect(() => {
    if (typeof window !== 'undefined') {
      console.log('Running on the client side');
    } else {
      console.log('Running on the server side');
    }
  }, []);
  useEffect(() => {
    setIsClient(true);
  }, []);

  useEffect(() => {
    if (isClient) {
      const currentDate = new Date();
      form.setValue('pickup_date', currentDate);
      console.log('useEffect is running on the client side');
      console.log('Form State:', form.getValues());
    }
  }, [isClient]);

<Grid item xs={12}>
            <Controller
              control={form.control}
              name="pickup_date"
              render={({ field }) => (
                <LocalizationProvider dateAdapter={AdapterDateFns}>
                  <DatePicker
                    value={field.value}
                    onChange={(date) => {
                      console.log('Selected Date:', date);
                      field.onChange(date);
                    }}
                    minDate={new Date()}
                    disablePast
                    closeOnSelect
                    inputFormat="dd MMM yyyy"
                    renderInput={(props) => <TextField {...props} />}
                  />
                </LocalizationProvider>
              )}
            />
          </Grid>

The console log will look like this -Running on the client side -useEffect is running on the client side -and the form value show pickup_date: sat Dec 17 2023 09:00:00 GMT+7

Thank you for helping me and giving me sugestion

0

There are 0 best solutions below