how to use triggerValidation with useEffect

I want to run validation ckecks and display errors when the screen is initially displayed. ■what I use: react, react-hook-form, typescript ■detail: there are multiple inputs to check. Currently, no error is displayed unless 『setTimeout』is used. isLoaded is true if data is fetched. I think the timing of error display and readering is a problem. I don’t want to use setTimeout. Do you know any ideas, please help.(enough information?)

function RootComponent (props) {

 useEffect(() => {
  setTimeout(() => {
   triggerValidation();
  }, 1000);
 }, [props.payload.isLoaded);

 const REQUIRED_VALIDATE = { required: { value: true, message: REQUIRED_MESSAGE } };
 const REGEX_NAME_NOT_EMPTY_VALIDATE = {
  pattern: { value: /\S+/, message: REQUIRED_MESSAGE },
 };

 return (
  <React.Fragment>
   <TextField error={!!errors.familyName} name="familyName"
    inputRef={register(
     required: REQUIRED_VALIDATE.required,
     pattern: REGEX_NAME_NOT_EMPTY_VALIDATE.pattern,
    )} />
    ・・・and more
  </React.Fragment>
 );
}

[shoko-eguchi]

@kotarella1110 @bluebill1049 could be run without using setTimeout. Thank you very much.

[kotarella1110]

@shoko-eguchi You should execute triggerValidation when the store changes. Therefore, you need to provide the props received from the Store to the deps of useEffect.

useEffect(() => {
  triggerValidation();
}, [
  props.data.name,
  props.data.familyName,
  props.data.phoneNumber01,
  props.data.phoneNumber02
]);