CODEWITHSUNDEEP
javascriptreactjsreact-reduxreact-hooks
p6aveen
p6aveen

Reputation: 43

react custom hook state is not updating when re-rendering

I'm having an issue when repopulating form for edit using react hooks.

Parent Component : Edit.js

const EditData = (props) => {
    const { Id } = props.match.params;
    const dispatch = useDispatch();
    // calling redux action to get the data
    useEffect(() => {
      dispatch(getDataById(Id));
    }, [Id]);
    const data = useSelector((state) => state.data);
    const initialState = {
      Id: data.cardId || '',
      Number: data.Number || '',
      Date: data.Date,
    };
    //calling custom hook
    const { handleChange, handleSubmit, values,errors } = useForm(
        initialState,// passing initial state to custom hook
        validateOnSubmit,
        submit
    );
    // used to submit the data
    function submit() {
      dispatch(updateCard(values));
    }
    return (<DateForm
            handleSubmit={handleSubmit}
            handleChange={handleChange}
            values={values}
            />);
  };

Custom hook: useform.js

  const useForm = (initialState, validateOnSubmit, callback) => {
    const [values, setValues] = useState(initialState);
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleChange = (event) => {
      const { name, value } = event.target;
      setValues({
        ...values,
        [name]: value
      });
    };
    const handleSubmit = (event) => {
      event.preventDefault();
      setErrors(validateOnSubmit(values));
      setIsSubmitting(true);
    };

    useEffect(() => {
      if (Object.keys(errors).length === 0 && isSubmitting) {
        callback();
      }
    }, [errors]);

    return {
      handleChange,
      handleSubmit,
      values,
      errors
    };
  };

when the API call get finished the react re-render the custom but the local state of the hook is not updating.

const useForm = (initialState, validateOnSubmit, callback) => {
      console.log(initialState);

on second render, here i can receive data from the API

    const [values, setValues] = useState(initialState);

but values is not getting updated, values is still holding the state from the initial render

I cannot figure out why this is. I'm just started to use react hooks, please help me.

Upvotes: 4

Views: 3356

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

As OP stated in a comment:

the initialState variable is updated when the API call get completed,I'm passing that initialState variable to const [values, setValues] = useState(initialState); , so it should update the values variable right?. but it's not!

It is should update the state, the initial state is assigned once until the component unmounts.

See useState API, it stated in lazy initialization:

The initialState argument is the state used during the initial render. In subsequent renders, it is disregarded.

Upvotes: 3

Related Questions