Thai Pangsakulyanont: Smells In React Apps - JSConf.Asia 2018

[@ChristianGenco]

Love it! My two takeaways of code smells to look for were: 1. watch for components that shouldn't know about other components (ex: your ButtonMenu's Button shouldn't know about a Menu) 2. watch for cross-cutting concerns that cause adding simple features to add code far apart. Aim for functional cohesion

[@alamandrax]

This talk was excellent and very informative! Thank you for this.

[@marshalslight]

Good talk! Practical and useful. Thanks for sharing.

[@TheBlockUniverse]

Wow it's such an amazing yet simple to understand talk, good job

[@quantran4704]

Thank you, good talk. Love Thai and Thai Land : ).

[@fizzi7716]

fun and informative talk!

[@d3vilm4ster]

Great talk bro! It would be great to see a talk from him right now that hooks exists.

[@dtinth]

Hello, thanks for the question. Thai here. No new talk about React yet, but I can say that I find most of this talk’s concepts are still relevant to me. But with hooks, how I write components have changed dramatically. If I were to do this talk in 2020 here would be the main differences: ・ 16:28 - I would’ve written everything as function props. I have not written a single class component for over a year now. ・ 18:39 - Even with hooks, the loss of cohesion can still occur. ・ 25:35 - I still use “data connector components” extensively. Now they’re implemented with `useSelector` and `useDispatch` hook. ・ 23:44 - I now have a convention of adding “-Connector” suffix to data connectors. So the `Auth` component I would call it `AuthConnector` in 2020. ・ 25:35 - I would also add that when the “data binding ceremony” happens at one place (i.e. at the data connector component), we can change the data binding implementation, without affecting any other parts of the app. I might show this by reimplementing the Auth component using Firebase Authentication (which has its on authentication storage, so Redux is not needed there), ・ I would have used TypeScript (or JSDoc annotation) instead of PropTypes. Cheers!

[@Omega6APP]

Definitely some good piece of advice!

[@ViltsuV]

Great talk!

[@DisfigurmentOfUs]

Thanks for the talk, Thai

[@xerxius5446]

Damn. This is awesome

[@Mnosuk]

what is the difference between booleanAssignment && and booleanAssignment ? : null and why you love to use that first case kub?

[@khuiification]

It's a quirk kind of. Typing a && b is quicker than a && b : null. If a is falsy in "a && b" then false would be returned, causing react to not render anything. Same goes thing for the ternary expression, but you have to type more. It's a matter of preference.

[@moveaxebx]

It's easier to read: isAdmin && than: isAdmin ? : null The last expression contains just too much noise.

[@AlexMost1989]

thanks for the useful talk!

[@kbrnsr]

Wow, can't remember if I have ever heard an argument against DRY

[@user-zk4pm7tp2b]

I have a button , I have a menu, aaah ;P

[@Mercio2]

nice talk

[@vjunloc1]

Sounds like Jian Yang