EduardS•2y ago

EduardS – 18-34 Feb 8

How to solve calling hooks conditionally here? I have this data coming from validateData that returns some data if valid otherwise null. I then check if data exists and return early otherwise. After that I use useCustomHook that depends on that 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;

5 Replies

EduardSOP•2y ago

In return jsx should be someOtherData but yeah its just an example hope its clear enough

Unknown User•2y ago

Message Not Public

EduardSOP•2y ago

@alexanderlill I asked the question in react-forum as well and that answer helped me. https://discord.com/channels/102860784329052160/1072888209383637073 Thanks for the other links they have been very informative! @iang unfortunately I cant modify the useCustomHook so the best solution was to wrap it in another component like someone suggested in my other post https://discord.com/channels/102860784329052160/1072888209383637073

Unknown User•2y ago

Message Not Public

reactibot•2y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1072948444446081085