9 replies

EduardS – 18-34 Feb 8

How to solve calling hooks conditionally here?
I have this datadata coming from validateDatavalidateData that returns some data 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•

9 replies

EduardS

EduardS – 18-34 Feb 8

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;

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Reactiflux

The best chat community for professionals using React or React Native

76,281 Members

Join