Hacker News Reader

Comment by eyelidlessness | Hacker News Reader

It doesn’t necessarily have the same benefits in React, but folks ought to consider using components for control flow, like SolidJS does[1].

1: https://www.solidjs.com/docs/latest/api#control-flow

View on HN

Agreed. I particularly like the look of their `<Switch>/<Match>` component[1]:

  <Switch fallback={<div>Not Found</div>}>
    <Match when={state.route === "home"}>
      <Home />
    </Match>
    <Match when={state.route === "settings"}>
      <Settings />
    </Match>
  </Switch>

Which doesn't seem to have an analog in the React babel-plugin[2] or standalone lib[3]

[1] https://www.solidjs.com/docs/latest/api#%3Cswitch%3E%2F%3Cma...

[2] https://github.com/AlexGilleran/jsx-control-statements

[3] https://github.com/samuelneff/react-control-flow

You could very easily implement that pattern yourself in a react app as a few HoCs. So far I think the react project has done a pretty decent job at limiting the surface area of the API. This seems a bit high level.

Funnily enough, this has existed in React through a Babel plugin. I'm not sure why this hasn't really caught on.

https://github.com/AlexGilleran/jsx-control-statements

I’ve encountered that, and kind of don’t understand why you’d need a Babel plugin. They’re trivial components to implement in regular JSX.

That's what I was thinking too!

Control-flow components like "<For>"... because you couldn't stand just writing "for" or "if" like a caveman and had to invent a custom DSL for it.

Solid actually uses them for static analysis which ~isn’t otherwise possible in JSX, which has to be an expression. It would be great if for/if were expressions in JS, but they’re not.

Some people consider this added complexity?

https://news.ycombinator.com/item?id=30509806

I mean, sure. But compilers often impose complexity as a trade off for performance or other benefits.

That's pretty slick.

Reply on news.ycombinator.com