EduardS
EduardS2y 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
EduardS
EduardS2y ago
In return jsx should be someOtherData but yeah its just an example hope its clear enough
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
EduardS
EduardS2y 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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
reactibot
reactibot2y 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