Learn More
Resend Email
9
donuts
5y

Please fucking tell me there's a better cleaner way to write this render() function?

The use of so many "in-line" code evaluations, arrow functions, (), {}, ...

Just spent like probably 30 minutes just trying to figure out what closes what...

And the author is inconsistent?

Sometimes he uses map( location => { return ... })

other times he uses setState((prevState) => ({ key: this.state.keyValue}))

And there's no note as to why... are they interchangeable, used in specific cases, does it matter????!!!!!!

Or is he just trying to demonstrate 1000 different ways you can say the same thing in JS?

!@#!#@!$#%#$!@#!@#!#$$%

rant
Favorite
Ranter
Comments
  • 1
    5y
    And I sorta hate the usage of : ...

    sometimes its like {if (this.state.show} } <div>Some giant block : <div> some othe giant block</div>

    If this was written in any other language like Java, i would kill the guy...
  • 1
    5y
    I am not gonna look at that image. Especially on Monday morning.
  • 1
    5y
    @cursee it's just an image... i m reading the 389 page book.... at 11:30PM... i have to work tmr....
  • 1
    5y
    Was probably supposed to sleep an hour ago... but had to finish....

    Still not done with the chapter but I'm calling it quits...
  • 1
    5y
    @billgates is it for exam? Why are you torturing yourself?
  • 1
    5y
    @cursee continuous learning... learning React so I can use ReactNative... and can also add to my CV...
  • 1
    5y
    @billgates It's more likely because of the nature of js rather than react.

    time to consider for a new book 🤔 maybe
  • 1
    5y
    @cursee well i m learning the React concepts but I sorta wanted to just know is this how it's really done... or is this guy just a Academic.

    Sorta reminds me of the code in Algo textbooks and God functions... Is there a way to break up these into smaller code blocks.
  • 3
    5y
    It’s JSX, it’s meant to be that way, just js and html, I also hate it when I forst learn it, ugly as fuck, but at the end of the day, it’s just javascript, which kakes it easiest to learn out of other popular framework imo, also try deconstructing the state under render so it’s easier to read
  • 1
    5y
    @devTea what do you mean by deconstructing?

    My problem is sometimes he users like ()=> (return { ... })

    Sometimes () => ({... })

    (id => {id})
    ([location] => {location})

    But he doesn't say why or what the fuck the difference is
  • 1
    5y
    Is there like a JS style/best practices cheat sheet that covers all the possible usages and explains when to use each and why?

    It how to clean up up this giant messes like these. I really hate those inline js blocks. Binding to a function fine.

    Writing a huge block calling map(...) ... Wtf...
  • 1
    5y
    Maybe you are only in like first few chapters of the book.

    I'm not familiar with react but I have experience with Vue. And in Vue you can write similar code like in your image but can also write prettier and cleaner code using components and templates. But learning components and templates take a bit more time.

    Probably the same with using map or setState.

    For clean code practice, this may or may not help. https://github.com/ryanmcdermott/...
  • 1
    5y
    @cursee I'm at 50% and it's not reusing prebuilt functions it's just the code looks like shit. It's almost like multiple people are writing the code snippets with different code styles...
  • 2
    5y
    @billgates then you really picked a not very nicely written book 😁 maybe the author used snippets he found on SO.
  • 1
    5y
    Also this is a render() function on a Component.

    I think the problem is just allowing in line code evaluation.

    I code in WPF using MVVM all the time so also needs binding but all code must be in the ViewModel class, not the XAML.
  • 1
    5y
    The identation is poorly executed. Thats why iys unreadable.
  • 1
    5y
    First, don’t return Array, use <></> fragment syntax to avoid key
    2nd, plz format your props, so they start with new line in component
    3rd, it’s 2019, n you still setState?!
  • 3
    5y
    @sunfishcc hooks is still new and state isn’t going to be deprecated tho

    @billgates try airbnb linting, they got rules there, also the syntax you replied to me doesn’t really make sense?
  • 2
    5y
    It's not that bad.

    Could probably use a linter for formatting consistency, and you might want to extract the lambda in locations.map, but otherwise I find it readable enough.
  • 1
    5y
    @devTea I mean mobx or redux
  • 2
    5y
    @sunfishcc redux is.. a pain to setup, never heard of mobx I’ll look into it
  • 1
    5y
    @devTea we use mobx. Very easy to setup. Never need to worry about state again 👍
  • 1
    5y
    @sunfishcc Using Redux is in later chapters.
  • 1
    5y
    @Fradow but the render() feels like a god function... Can the JSX itself be broken up so it can be more like

    <div>
    {generateHeader()}
    {if (this.state.canEdit) generateEditable() : generateReadOnly()}
    </div>
  • 1
    5y
    @bigus-dickus which official documents? For React or JS? Link?
  • 1
    5y
    @billgates did you follow a tutorial or something? It’s more difficult to convert states into redux than use redux from ground up.
    Btw, don’t know if you already noticed, the onClick function will create multiple instances which isn’t the most efficient way to do it. It’s preferred to create a function inside class and then call it. (Use arrow func, so you don’t have to bind)
  • 1
    5y
    If you dont like it then write your own version. Stop crying!!!!
  • 1
    5y
    @sunfishcc I'm reading React In Action
  • 2
    5y
    @billgates think React as JS function. Any func can return JSX element. Just like return document.createElement()
    render() { return (
    <>
    {this.renderHeader()}
    {this.state.showBody && this.renderBody()}
    </> )}

    renderHeader = () => (
    <div>{this.props.headerContent}</div>
    )
  • 1
    5y
    @billgates the render is the function returning the object HTML template.

    Objects should be small enough so that their render function isn't huge (if it is, you might need to split the objects).

    Splitting the render function makes things less readable in my opinion, because now I need to hunt down what other functions render to have a sense of what the object is.

    As always with that sort of things, it's a matter of opinion.
Related Rants
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment