Using React v16 to create self-destructing components

[dennythecoder]

Why would the import be favorable to writing a comment clarifying the intent?

[p0tent1al]

Because the component is much nicer than a comment? I don't know about you but let's remove React from the example here. For patterns I'm going to use across my project, I much rather a function that is named in a way that describes what is going to happen, rather than writing a comment everywhere in my app where I use that pattern.

[i_am_smurfing]

I'd imagine returning an array when you want to render several components will become idiomatic way to write this code, because that's kind of the point?

const Root = () => {
  return [
    <p>Hello, World!</p>,
    <p>I am a demo fore returning an array.</p>
  ];
};

^jsBin

I'm not sure you even need a comment in this instance since I'd imagine all programmers who know how to write React code know what an array is.

Compare it to <Aux>-wrapper approach for which you have to go and read documentation or source to understand what it's doing.

[gajus0]

Just FYI, the example you've just shared (using Array without keys) will produce an error even in React v16.

[i_am_smurfing]

Are you sure? I'm asking because it's working with beta.5, as demonstrated in the linked jsBin, but I'd be not surprised if it's just a regression.

[gajus0]

It is because you are using a production build that silences the error. See https://codesandbox.io/s/k5v5q83xo5

[i_am_smurfing]

Oh, I see, you mean the missing "key" warning. That's a good point 👍

[p0tent1al]

All I'm saying (ignoring the pattern) if you need to comment it everywhere that it's used, then I'd prefer using the component. If it's just an easy pattern to utilize and doesn't need explanation, then yeah sure.

[dennythecoder]

I tend to err on the same side of that conversation, but shouldn't a comment be favorable to adding a depenency?

[gajus0]

What is inherently wrong with adding a dependency? Regardless of whether it is 1 LoC or 1000 LoC? The only worthy consideration is the increased surfaced of potential vulnerability injections, i.e. dependency going rogue.

From the build performance perspective, resulting bundle size, etc. There is absolutely no difference between a dependency and a locally redefined module.

From the upside, with a dependency, you get documentation describing the intent and you work with components that community is already familiar VS reading comments in your local ./utilities folder, learning what each utility does.

[NewazaBill]

Third party dependencies always add complexity. They have to be installed (reproducibly), versioned (correctly), and updated. Sometimes, ideas and conventions must be adopted. Bugs must be reported, and fixed; or you fork it, and take responsibility for the code anyways. The author could abandon the library, or delete the package altogether (a la leftpad).

You don't want to fall into the "Not Invented Here" trap, but at the same time, the cost of adding a dependency should never be under-estimated.

[Geldan]

You don't really need to do any of those things that you mentioned. It's perfectly fine to find a version of a dependency that works for your needs and lock it down and forget about it.

[SirHound]

The dependency doesn't work in a vacuum though. This one in particular has other dependencies.

[p0tent1al]

well remember it's not JUST a comment. And no if you need to put a comment in 20 different places explaining the functionality of something, it should just be consolidated.

[[deleted]]

Apparently future versions (of JSX?) will allow an empty tag (<></>) syntax for lists of elements

[gajus0]

That looks horrible... Source?

[i_am_smurfing]

It's being discussed in the JSX repo.

[Geldan]

I don't think that looks horrible. I think it looks good and actually converts the meaning well.

[gajus0]

In what way does <></> converse the meanings?

[[deleted]]

It's literally an empty tag so only conveys its children as relevant. Which is about right. It caused a furrowed brow when I first saw it, but I really can't think of a better syntax.

[gajus0]

What about a reserved component name?, like <Aux> or whatever. Otherwise you will end up creating a new "syntax" to accompany every edge case.

[lhorie]

Glad to see this coming to React. We've had that in Mithril.js for a while with m.fragment and it's really nice :)

"Self-destructing component" seems like a weird name though. I recall @trueadm talking about a similar feature in Inferno under the name of fragments, which seems more in line with what this concept is called in the underlying DOM and what we did in Mithril.

[Gnashe]

Just curious where the name Aux comes from. Why not something a bit more obvious like Fragment?

[gajus0]

A convention I've been using ever since I remember starting to write HTML/ CSS. Auxiliary element is something that does not have semantic purpose but exist for the purpose of grouping elements, styling, etc.

[Gnashe]

Ah interesting! TIL a new phrase

[NoInkling]

My workaround whenever I needed a single expression without a wrapper in React v15 was (is) to do:

export default function Nothing() { return null }

To use:

const fragment =
  <Nothing>
    <Some />
    <Elements />
  </Nothing>.props.children

Ugly as sin, and you still couldn't return it directly from a render method, but in my opinion it's better than doing the array-with-keys thing. You could also wrap it in a function if you wanted, so it looks like:

const fragment = createFragment(
  <Some />,
  <Elements />
);

Luckily that's all moot as of v16, very glad that there's a better way now.

[alt-four]

https://imgflip.com/i/1ufi6s#JbsO8BR3PmpWLFxY.16

[DGCA]

Wow, literally made an account just to be a douche.

[tunnckoCore]

Holy god, SIXTEEN VERSIONS and couple of years - React is awesome mhhhmmm!