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;
  }

   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;
  }

• javascript
• reactjs

3 Answers 3

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;
  }

You should move callback declaration to top.

// Dispatch answers to api and redirect to profile
// Declare callback before you use it in useForm function
const callback = () =>{
 dispatch(loggedPostOnboarding(values, userUUID));
}

const { values, errors, handleChange, handleSubmit } = useForm(
// eslint-disable-next-line
 callback,validate
);

function expressions are not initialized as opposed to the function declaration. so you have to express(declare) upper than the consumers. read more about functions hoisting here:
https://scotch.io/tutorials/understanding-hoisting-in-javascript#toc-hoisting-functions

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
);

after all, you should know that arrow functions are not introduced to migrate all our function declarations to them(just because they are new to javascript). they have bound context and their own use cases. it's better not to abuse them.