title: Reactjs useReducer hook error ReferenceError: Cannot access 'reducer' before initialization
body: <p>I am learning Reactjs hoooks by reading online tutorials. Here is my code. I am sure it can be improved. I got this error:-</p>
  
  <blockquote>
    <p>ReferenceError: Cannot access 'reducer' before initialization</p>
  </blockquote>
  
  <pre><code>    function ProfileForm(props) {
  const form = useForm();
  const {
    register,
    handleSubmit,
    errors,
    formState: { isSubmitting }
  } = form;
  
  const [profile, dispatch] = useReducer(reducer, profileInitSate)
  
  const profileInitSate = {
    displayName: '',
    birthDate: '',
    height: 0,
  }
  
  const reducer = (state, action) =&gt;{
      switch(action.type){
        case 'displayName' : 
          return {...state, displayName: action.value};
  
        case 'realName':
          return {...state, realName: action.value};
  
        case 'birthDate':
          return {...state, birthDate: action.value};          
        default:
          return state;          
      }  
  }
  
  useEffect(() =&gt; {
    if(props.location.state.profile){
        dispatch({type: 'dispalyName', 
        value: props.location.state.profile.displayName})
        dispatch({type: 'realName', 
        value: props.location.state.profile.realName})
        dispatch({type: 'birthDate', 
        value: props.location.state.profile.birthDate})
        dispatch({type: 'height', 
        value: props.location.state.profile.height})
    }
  
  }, [profile]);
  </code></pre>
  
  <p>Please let me know how can I improve this code also why do I get this error?</p>