Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Simple React Patterns

lucasmreis.github.io

Post reply on HN
Print view View original

21–30 of 87 posts

Re: Simple React Patterns

#21

Post by recursive »

personomas wrote: post #5
dunstad wrote: post #3

Earlier quoted context omitted.

React explicitly discourages using inheritance with components, instead promoting composing components together like functions. You're also encouraged to keep them stateless if possible, so they create the same output for the same input. I'll need some convincing that functional programming is on its way out in JavaScript.

Yeah, but why did they switch from `React.createClass({..})` to the class syntax? Classes are terrible in JS, they're not even native JS, it doesn't fit in JS. This change alone has brought more and more OO JS code.

What do you mean native JS? It doesn't get much more native than "given keywords and syntax in the language and in the specification"

Re: Simple React Patterns

#22

Post by hungerstrike »

always_good wrote: post #13
personomas wrote: post #6

Earlier quoted context omitted.

In React v0.13 https://reactjs.org/blog/2015/03/10/react-v0.13.html , they claimed the reason for the switch is because the `class` syntax is for "more flexibility." What can you do with the `class` syntax that you can't do with the functional syntax? Furthermore, you can generate React code much easier with the functional syntax than with the class syntax. Also, the functional syntax has mixins and other ways to com…

Seems like a weird thing to miss for someone who ostensibly prefers functional programming. For example, people here will talk about `function User() {}` like it's the pinnacle of amazing abstraction. Because it has the word "function" in it or something. There's nothing functional about that to me. Mutating the prototype and dealing with the implicit `this` variable in your functions is about as far away from functi…

People also write tons of bad functional code with JS. It gets worse and worse the more that people keep following this cargo cult of HOCs and functional programming. The obsession with using HOCs for passing a simple variable around is particularly absurd. Importing objects with methods (or even just a namespace with functions) is way, way cleaner than importing every function seperately.

Which stable and widely used GUI kit has ever been done well with functional programming? Until one exists, I can’t really take anybody who pushes functional programming for GUIs very seriously.

Functional programming just isn’t that good for complex domains. OOP is way better for GUIs.

Re: Simple React Patterns

#23

Post by TekMol »

This part seems strange. What is it supposed to do?

    componentDidMount() {
     fetch("https://swapi.co/api/planets/5")
      .then(res => res.json())
      .then(
       planet => this.setState({ loading: false, planet }),
       error => this.setState({ loading: false, error })
      );
    }

Re: Simple React Patterns

#24

Post by kowdermeister »

personomas wrote: post #5
dunstad wrote: post #3

Earlier quoted context omitted.

React explicitly discourages using inheritance with components, instead promoting composing components together like functions. You're also encouraged to keep them stateless if possible, so they create the same output for the same input. I'll need some convincing that functional programming is on its way out in JavaScript.

Yeah, but why did they switch from `React.createClass({..})` to the class syntax? Classes are terrible in JS, they're not even native JS, it doesn't fit in JS. This change alone has brought more and more OO JS code.

Classes are perfectly fine in JS, they are just syntactic enhancements for managing prototypes more easily.

Re: Simple React Patterns

#25

Post by Secretmapper »

TekMol wrote: post #23

This part seems strange. What is it supposed to do? componentDidMount() { fetch("https://swapi.co/api/planets/5") .then(res => res.json()) .then( planet => this.setState({ loading: false, planet }), error => this.setState({ loading: false, error }) ); }

It fetches data from an endpoint then sets component state based on the response

Re: Simple React Patterns

#26

Post by pdyck »

TekMol wrote: post #23

This part seems strange. What is it supposed to do? componentDidMount() { fetch("https://swapi.co/api/planets/5") .then(res => res.json()) .then( planet => this.setState({ loading: false, planet }), error => this.setState({ loading: false, error }) ); }

When the component is mounted on the page, a planet is fetched from an api. Then the response body is parsed to JSON. After that the object is added to the component state. When there was an error it is added to the state instead.

Re: Simple React Patterns

#27

Post by Guillaume86 »

jbaudanza wrote: post #20

The problem with resolving promises inside of `componentDidMount` is that there is no way to cancel those promises. If the component is unmounted, and then setState is called, it will generate an error (or a warning. I can't remember). Facebook discusses this on its blog: https://reactjs.org/blog/2015/12/16/ismounted-antipattern.ht... I've been using Observables which, in my experience, bind a little cleaner than Pro…

Yes there was a whole discussion in a github issue about the correct pattern to solve this. Creating and guarding against a `isMounted` field in your `.then()` callbacks means you prevent garbage collection of the unmounted components. An easy solution is to use cancellable promises (with some subtleties to allow garbage collection). There's an implementation which take care of this properly here (provides an HoC): https://github.com/hjylewis/trashable-react .

Re: Simple React Patterns

#28

Post by TekMol »

pdyck wrote: post #26
TekMol wrote: post #23

This part seems strange. What is it supposed to do? componentDidMount() { fetch("https://swapi.co/api/planets/5") .then(res => res.json()) .then( planet => this.setState({ loading: false, planet }), error => this.setState({ loading: false, error }) ); }

When the component is mounted on the page, a planet is fetched from an api. Then the response body is parsed to JSON. After that the object is added to the component state. When there was an error it is added to the state instead.

    Then the response body is parsed to JSON
The "res => res.json()" call? But what does this do? res seems to be used nowhere and just discarded without any side effects.

Re: Simple React Patterns

#29

Post by TekMol »

Secretmapper wrote: post #25
TekMol wrote: post #23

This part seems strange. What is it supposed to do? componentDidMount() { fetch("https://swapi.co/api/planets/5") .then(res => res.json()) .then( planet => this.setState({ loading: false, planet }), error => this.setState({ loading: false, error }) ); }

It fetches data from an endpoint then sets component state based on the response

Well, it makes a http request but it seems to do nothing with the data returned.

Re: Simple React Patterns

#30

Post by arianvanp »

TekMol wrote: post #28
pdyck wrote: post #26

Earlier quoted context omitted.

When the component is mounted on the page, a planet is fetched from an api. Then the response body is parsed to JSON. After that the object is added to the component state. When there was an error it is added to the state instead.

Then the response body is parsed to JSON The "res => res.json()" call? But what does this do? res seems to be used nowhere and just discarded without any side effects.

This is a shorthand for

    function (r) { return r.json()}
Note the extra return. We return the JSON decoded response that is our planet. and use its value to set state if no error occured
Post reply on HN