使用自定义挂钩时，如何在 useEffect 中的操作后设置默认值

Question

I use React with Hooks and Redux saga. Once page is rendered, useEffect works and take actions(getting company information) and then, this page re-rendered. Then, variable selCompany from rootState has data. But, variables like name and location which ared used with useInput don't set initialData from selCompany's data. How can I set default value in useInput(custom hooks) after actions in useEffect?

Here is custom hooks which I use.

/*useInput.ts*/
import { useState, useCallback } from "react";
// custom hook
export default function useInput(initialValue: string) {
  const [value, setValue] = useState(initialValue);
// after re-rendered, variable [value] is empty string
// but parameter [initialValue] has data
// console.log(initialValue); // 'test'
// console.log(value); // ''

  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  }, []);
  return [value, handleChange] as [string, typeof handleChange];
}

And Here is codes

/**CompanyUpdateContainer.tsx */
const CompanyUpdateContainer: React.SFC<RouteComponentProps<MatchParams>> = ({ match }) => {
  const { email } = useSelector((state: RootState) => state.user);
  const { selCompany } = useSelector((state: RootState) => state.company);
  const { id } = match.params;
  const [name, setName] = useInput(selCompany.name);
  const [location, setLocation] = useInput(selCompany.location);
  const [error, setError] = useState<Array<Error>>([]);
  const [imageList, setImageList] = useState<Array<File>>(selCompany.imageList);
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();

  console.log(name, location); //after re-render, still values return empty string
  useEffect(() => {
    setLoading(true);
    dispatch(getCompanyDetail({ email, id })); // getComapnyDetail put data on 'selCompany'
    setLoading(false);
    return () => {};
  }, [dispatch, email, id]);
..... some mode code

Answer 1

you could set the value to initialValue when the component mounts

 /*useInput.ts*/
    import {
        useState,
        useCallback,
        useEffect
    } from "react";
    // custom hook
    export default function useInput(initialValue:string) {
        const [value, setValue] = useState(initialValue);

 useEffect(() => {
   setValue(initialValue);
  },[]);

  const handleChange = useCallback((event: React.ChangeEvent <HTMLInputElement > ) => {
       setValue(event.target.value);
        }, []);
        return [value, handleChange] as[string, typeof handleChange];
    }