I know I should use if-else when branching UI logic. But I’m curious what happens when using a try-catch block in a functional component or render function like below? Is it the anti-pattern?

function SomeScreen() {
  try {
    if (foo) {
      throw Error();
    }
    if (bar) {
      throw Error();
    }
    return <Children />
  } catch (e) {
    return <ErrorComponenet error={e} />
  }
}