Summary: <p dir="ltr"><strong>Paul Cowan was a painter and decorator for 30 years until he switched to front end development. He got into React because for him, much of programming didn’t make a whole lot of sense until he read about the flux model, and React Redux was one of the few frameworks that followed the flux model. Spending most of his life outside of the programming world has granted him a unique perspective frameworks like React. He talks about some of his frustrations with React hooks. Hooks can be frustrating because it’s a new paradigm to learn JS, the dependencies array can get bungled, React relies on the order in which hooks are called, and closures can be difficult. Overall, hooks come off at deceptively simple. Paul believes that we shouldn’t need external tooling to keep the dependency array on the right track. To avoid these frustrations, Paul reminds listeners that hooks have to be called in the same order each time at the beginning of your functional components. You also cannot have a hook in an if statement or event handler. It’s also important to remember the declarative nature of React. In production code, updating states is the best way to go. </strong></p> <p dir="ltr"><strong>The panel agrees that it’s good that react has clarified their position on what hooks are supposed to be used for, and how we are beginning to see the limitations of React hooks. They discuss unit testing with hooks and how to determine when the React framework becomes too big. They talk about some of the new features that are coming out and how they benefit new developers. When mistakes do happen, Paul talks about how he determines what went wrong. If you want to get advice from other humans, they suggest consulting StackOverflow, ReactiveFlux, and IRC chat. When you do consult these sources, it’s important that your problem is reproducible so that it’s easier for people to help you out. It’s also important that you learn how to ask questions. </strong></p> <p dir="ltr"><strong>The show finishes with them discussing how they handle changes in the industry. They have found that reusing components is difficult across Angular and React. They talk about the positive ways that React went version to version. They discuss complexity management in apps. The panel talks about some ways to do things in React without hooks, but also caution that avoiding the popular thing can also get you into trouble. </strong></p> <h2 dir="ltr"><strong>Panelists</strong></h2> <ul> <li dir="ltr"> <p dir="ltr"><strong>Thomas Aylott</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Charles Max Wood</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Chris Reyes</strong></p> </li> </ul> <h2 dir="ltr"><strong>Guest</strong></h2> <ul> <li dir="ltr"> <p dir="ltr"><strong>Paul Cowan</strong></p> </li> </ul> <h2 dir="ltr"><strong>Sponsors</strong></h2> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://nx.dev/react?utm_source=Podcast&utm_medium=Banner&utm_campaign=React%20Roundup&utm_content=Nx">Nrwl | Nx.Dev/React</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="http://sentry.io/">Sentry</a> | Use the code “devchat” for $100 credit</strong></p> </li> </ul> <p dir="ltr"> </p> <h2><strong>_______________________________________________________</strong></h2> <blockquote> <p><strong>"The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood will be out on November 20th on Amazon. Get your copy on that date only for $1.</strong></p> </blockquote> <h2><strong>_______________________________________________________</strong></h2> <h2 dir="ltr"><strong>Links</strong></h2> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://facebook.github.io/flux/docs/in-depth-overview/">Flux model</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://react-redux.js.org/">React Redux</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://medium.com/crowdbotics/how-to-use-usereducer-in-react-hooks-for-performance-optimization-ecafca9e7bf5">useReducer</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://blog.logrocket.com/frustrations-with-react-hooks/">Frustrations with React Hooks</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://blog.logrocket.com/solutions-to-frustrations-with-react-hooks/">Solutions to Frustrations with React Hooks</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://eslint.org/">ESLint</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://nextjs.org/">Next.js</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://relay.dev/">Relay</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.seleniumhq.org/">Selenium</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://stackoverflow.com/">StackOverflow</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://projectreactor.io/docs/core/release/api/reactor/core/publisher/Flux.html">ReactiveFlux</a></strong></p> </li> </ul> <h2 dir="ltr"><strong>Picks</strong></h2> <p dir="ltr"><strong>Thomas Aylott</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://en.wikipedia.org/wiki/Shada_(Doctor_Who)">Shada</a></strong></p> </li> </ul> <p dir="ltr"><strong>Charles Max Wood</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.amazon.com/MaxCoders-Guide-Finding-Dream-Developer-ebook/dp/B081MBL5C9/ref=sr_1_1?keywords=The+MaxCoders+Guide+to+Finding+Your+Dream+Developer+Job&qid=1574145265&sr=8-1">The MaxCoders Guide to Finding Your Dream Developer Job</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.imdb.com/title/tt0038650/">It’s A Wonderful Life</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.imdb.com/title/tt0081190/">Mr. Kreuger’s Christmas</a></strong></p> </li> </ul> <p dir="ltr"><strong>Chris Reyes</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/">Netlify React Hooks deep dive</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.apple.com/airpods-pro/">AirPods Pro</a></strong></p> </li> </ul> <p dir="ltr"><strong>Paul Cowan</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://blog.logrocket.com/solutions-to-frustrations-with-react-hooks/">Solutions to Frustrations with React Hooks</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Stay fit</strong></p> </li> </ul>
