Can't access lexical declaration `callback' before initialization

Question

   const { values, errors, handleChange, handleSubmit } = useForm(
    // eslint-disable-next-line
    callback,validate
  );
  // load different redux state variables or read them from tegger api
  const userUUID = useSelector((state) => state.logged.profile.uuid);
  const answerLoading = useSelector((state) => state.logged.answersIsLoading);
  const dispatch = useDispatch();

  const formClasses = formStyles();

  // Dispatch answers to api and redirect to profile
  const callback = () =>{
    dispatch(loggedPostOnboarding(values, userUUID));
  }

  // Validate fields are filled
  const validate = () => {
    const error = {};
    if (isEmpty(values.f6039d44b29456b20f8f373155ae4973 || '')) {
      error.fullname = t('erros.fullName');
    }
    if (isEmpty(values['1f7b89b253833a6dd8cd456fb019eb47'] || '')) {
      error.gender = t('errors.requiredField');
    }
    return error;
  }

I'm new to react, I have been given a task to refactor ES5 code to ES6 code, I get this error ReferenceError: can't access lexical declaration `callback' before initialization , when I refactor the function into a arrow function. What I'm I doing wrong?

ES5 code

const { values, errors, handleChange, handleSubmit } = useForm(
    // eslint-disable-next-line
    callback,validate
  );
  // load different redux state variables or read them from tegger api
  const userUUID = useSelector((state) => state.logged.profile.uuid);
  const answerLoading = useSelector((state) => state.logged.answersIsLoading);
  const dispatch = useDispatch();

  const formClasses = formStyles();

  // Dispatch answers to api and redirect to profile
  function callback(){
    dispatch(loggedPostOnboarding(values, userUUID));
  }

  // Validate fields are filled
  function validate(){
    const error = {};
    if (isEmpty(values.f6039d44b29456b20f8f373155ae4973 || '')) {
      error.fullname = t('erros.fullName');
    }
    if (isEmpty(values['1f7b89b253833a6dd8cd456fb019eb47'] || '')) {
      error.gender = t('errors.requiredField');
    }
    return error;
  }

Answer 1

Function declarations are hoisted. During evaluation, all the function declarations are parsed first - so you can reference a function before its declaration.

Variable / Constant assignments are not hoisted, so they have to precede their use, like this:

  const dispatch = useDispatch();

  // Dispatch answers to api and redirect to profile
  const callback = () =>{
    dispatch(loggedPostOnboarding(values, userUUID));
  }

const { values, errors, handleChange, handleSubmit } = useForm(
    // eslint-disable-next-line
    callback,validate
  );
  // load different redux state variables or read them from tegger api
  const userUUID = useSelector((state) => state.logged.profile.uuid);
  const answerLoading = useSelector((state) => state.logged.answersIsLoading);

  const formClasses = formStyles();

  // Validate fields are filled
  const validate = () => {
    const error = {};
    if (isEmpty(values.f6039d44b29456b20f8f373155ae4973 || '')) {
      error.fullname = t('erros.fullName');
    }
    if (isEmpty(values['1f7b89b253833a6dd8cd456fb019eb47'] || '')) {
      error.gender = t('errors.requiredField');
    }
    return error;
  }