Is it possible to render a component inside useEffect hook?

Solution for Is it possible to render a component inside useEffect hook?
is Given Below:

I just wonder, if is it possible to render a component inside a useEffect hook.
I have two components, let’s say A and B.
In Component A, I have my useEffect hook as follows.
While testing some condition inside hook, I want to render a component B.

export default function A() {
  const [location, setlocation] = usestate(null);
  useEffect(() => {
    if (condition) {
      <B />; // it does not render anything though
    } else {
      //code
    }
  }, [location]);
}

export default function B() {
  const test = () => {
    console.log("testing");
  };
  return (
    <View style={styles.container}>
      <Button title={"Click Me"} onPress={test} />
    </View>
  );
}

That’s not where you’d want to use useEffect anyway.

Since location is a state atom, it changing will cause a rerender, so the effect hook is unnecessary for that. (I assume // code is more complicated than what you let on here, though…)

For the equivalent, but working example,

export default function A() {
  const [location, setlocation] = useState(null);
  if (condition) {
    return <B />;
  }
  // code
  return null;
}

EDIT based on comments

To force a rerender (unmount + remount) of a component, you can use an arbitrary key for it:

export default function A() {
  const [location, setlocation] = useState(null);
  React.useEffect(() => {
    // ....
  }, [location]);
  return <B key={location} />;
}

To force it to rerender based on a condition in an effect,

export default function A() {
  const [location, setlocation] = useState(null);
  const [conditionCounter, setConditionCounter] = useState(0);
  React.useEffect(() => {
    if(condition) {
      setConditionCounter(c => c + 1);
    }
  }, [location]);
  return <B key={conditionCounter} />;
}

(or maybe just new Date() or Math.random(), but a counter works.)