I have a condition (isOnFullDomain()) that returns true, if I am in this condition, the Component can't load.
This is the code i am using:
import Component from 'components/Component';
useEffect(() => {
Component();
if (isOnFullDomain()) {
console.log('remove Component');
}
}, [path]);
I really need to remove the component once it's loaded, if I load it once, it's showing up on the screen.
I need something similar to:
if (isOnFullDomain()) {
Component().remove;
}
Any idea how I can fix it?
You should be able to achieve that by using JSX, rather than react hooks - usually hooks are move towards data management, react to some value updates and do something about it.
In this case I imagine you have a render method that uses your Component. Hence something like this would make the Component not appear in the page.
import Component from 'components/Component';
// ...
const shouldRenderComponent = !isOnFullDomain();
return (
{shouldRenderComponent && <Component />
);
Sidenote: if you don't want to load the Component code internally, then you might want to have a look at the import statement and bundle splitting in order to "lazy load" that component.
In the component where you are rendering this component, you could conditionally render it, by doing something like this.
return(...
{!isOnFullDomain() && <ComponentToBeRendered/>}
...
)