3 replies

How to avoid calling hook conditionally here?

I have this

data

data

coming from

validateData

validateData

that return the

rawData

rawData

if valid otherwise

null

null

. I then check if

data

data

exists and return early otherwise. After that I use

useCustomHook

useCustomHook

that depends on that

data

data

but because I returned early I get a warning that hook is called conditionally. How can I avoid this issue?

const MyComponent: FC<Props> = ({ rawData }) => {
  const data = validateData(rawData);
  if (!data) return null;

  const someOtherData = useCustomHook(data.something);

  return <div>{data.something}</div>;
};

export default MyComponent;

const MyComponent: FC<Props> = ({ rawData }) => {
  const data = validateData(rawData);
  if (!data) return null;

  const someOtherData = useCustomHook(data.something);

  return <div>{data.something}</div>;
};

export default MyComponent;

How to avoid calling hook conditionally here?

Similar Threads