31

In Angular we can create a custom pipe to change data format. For example, see the UpperCasePipe:

{{ value_expression | uppercase }}

There doesn't appear to be pipes in React, so my question is: How can we use pipes in React?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
kamal aryal
  • 441
  • 1
  • 4
  • 6
  • 5
    Forget everything you know about Angular and start by reading some getting started guides on React – caesay Feb 13 '19 at 11:22
  • 4
    *How we can use pipes in React .?* - by calling a function. – Estus Flask Feb 13 '19 at 11:35
  • 3
    There's no need to forget everything you know about Angular. You can very well know both Angular and React, it just takes a while to shift your through process from one to other. – Lazar Ljubenović Feb 13 '19 at 12:30

3 Answers3

40

There are simply no pipes, because anything evaluated in the brackets is considered plain JavaScript. Because this is evaluated as plain javascript, there is simply no need for pipes. If this.state.variable is a string, I can use the .toUpperCase() prototype to display the string in all uppercase:

{this.state.variable.toUpperCase()}

This would be functionally equivalent to UpperCasePipe:

{variable | uppercase}

It's easy enough to just create a wrapper function, and use that. For example, if you wanted to create a custom function to uppercase just the first letter, we can use this function from here:

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

We then would call it like so:

{capitalizeFirstLetter(this.state.variable)}
Blue
  • 22,608
  • 7
  • 62
  • 92
  • 2
    It's not my down vote so I don't know the reason for it, but I almost down voted this too. "There are simply no pipes" is all that was necessary, and that can be a comment. This question should be closed, not encouraged. That said, If you wanted to actually be helpful you might show a real world example of a common use case for a pipe in angular, and then show how it would also be implemented in React. – caesay Feb 13 '19 at 11:23
  • Sure, I agree (see my edited comment) but this is not a good answer. I fail to see how `{this.state.variable.toUpperCase()}` really explains anything at all, and I am familiar with both frameworks. – caesay Feb 13 '19 at 11:26
  • I downvoted because you just came in, and posted a copy of my answer. Now of course it's been expanded and is more comprehensive than mine, but this practice is destroying Stackoverflow and needs to be stemmed. – P Varga Feb 13 '19 at 11:50
  • 2
    @Pete Just because I had a similar answer, does not mean I copied you. Even looking through the history at my earliest revisions, you could see the wording was entirely different. As I was typing, I saw the "1 new answer" popup, but still continued typing. It was not my intention, nor an attempt to copy you. I hope you think a little better of users in the future. – Blue Feb 13 '19 at 17:33
  • 1
    @FrankerZ Ok, my apologies then. After all this question has an obvious answer so all answers are going to be similar. This pattern (answer downvoted & a v. similar one appears a minute later) has just been happening too much lately. But sometimes it's a coincidence – P Varga Feb 13 '19 at 20:56
  • @Peter Can you please tell me what "Active reading." is, and why it's on almost every single one of your edits? – Blue Jun 13 '19 at 23:03
6

Expressions within {} in JSX are just plain JavaScript. | is bitwise OR. There are no Angular-like "pipes". A JavaScript function achieves the same thing, though.

Alternatively, to get memoisation, try the new useMemo() hook

P Varga
  • 19,174
  • 12
  • 70
  • 108
0

In the simplest case, you just need to call a function in the "template" (although there are no templates in React: it's just JSX syntax, a sugar on top of existing standard, in order to allow you to write XML-like code for calling a function in the middle of regular JavaScript file).

So what would in Angular be a pipe with name set to 'uppercase', can in React be a simple function:

function uppercase (value: string) { return /* ... */ }

In React, you'd just call this function in the middle of the "template" with no care in the world:

<div> { uppercase(value_expression) } </div>

But there's something that they don't tell you: Angular pipes are by default marked as pure functions and Angular doesn't re-run the pipe code unless its inputs change. With the React "equivalent" shown above, you don't get that. Instead, every time a component is re-rendered (which can be quite often, as often as typing or clicking anything in the app), the whole body of the function will be re-evaluated.

Now, for such a simple case as an uppercase pipe/function, that's not a big deal, but you might have some more complex calculations, or might have the same calculation repeated numerous times (such as in a large data table). In such cases, this is not an acceptable behavior.

Therefore, you'd need a caching or memoization strategy for your React functions which act as pipes in Angular. And, guess what, just like everything else in React, the library doesn't solve it for you, so you have to hunt down such a simple thing yourself, decide on which you want to use, install the package, read its docs, and use it.

Lazar Ljubenović
  • 18,976
  • 10
  • 56
  • 91
  • 3
    The last paragraph is not true, [useMemo()](http://reactjs.org/docs/hooks-reference.html#usememo) provides this functionality – P Varga Feb 13 '19 at 12:46
  • This comment is partly helpful, but also partly misleading. React has provided tools to optimize rendering of pure functions even before hooks, such as [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent) and [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) (though @ᆼᆺᆼ is right in pointing out the newest tool for doing so - useMemo) – Christian Jensen May 01 '19 at 18:36
  • @ChristianJensen `useMemo()` is a generic utility for memoisation. `PureComponent` and the `shouldComponentUpdate()` method provided ways to optimise re-rendering of components, (their equivalent for functional components is `React.memo()`), but weren't a generic tool for any computation (Presumably a value transformed via an Angular "pipe" is not a *prop*, but is computed from one, so a custom `shouldComponentUpdate()` was indeed the way before hooks) – P Varga May 01 '19 at 21:21
  • Or indeed creating a separate component, so `{{sometime | date:'shortTime'}}` from Angular would look something like `{sometime}` in React, and if that's a `PureComponent` then it would be just as efficient as an Angular pipe. Although Angular users will still say it's *built-in* to that framework, whereas with React you have to use a 3rd-party library or reinvent the wheel (Then again, even in Angular one often ends up using `moment.js` in this case) – P Varga May 01 '19 at 21:34