3 replies

How to avoid calling hook conditionally here?

I have this datadata coming from validateDatavalidateData that return the rawDatarawData if valid otherwise nullnull. I then check if datadata exists and return early otherwise. After that I use useCustomHookuseCustomHook that depends on that datadata 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;

Reactiflux•4y ago•

3 replies

EduardS

How to avoid calling hook conditionally here?

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;

No replies yet

Join the Discord to continue the conversation

Reactiflux

The best chat community for professionals using React or React Native

76,281 Members

Join

How to avoid calling hook conditionally here?

How to avoid calling hook conditionally here?

No replies yet

Reactiflux

No replies yet

Reactiflux

Similar Threads