The latest articles on DEV Community by Mike Botsko (@viveleroi). https://dev.to/viveleroi https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F957429%2Ffbf1ecdb-ee56-4126-9bfe-690d5d64c09f.jpeg https://dev.to/viveleroi en Mike Botsko Sat, 29 Oct 2022 19:43:20 +0000 https://dev.to/viveleroi/great-resources-for-learning-react-and-typescript-3ec4 https://dev.to/viveleroi/great-resources-for-learning-react-and-typescript-3ec4 <p>We're about to start a major rewrite of an enterprise-scale web application and it didn't us long to decide on <strong>React + Typescript</strong>. We're replacing a decade-old AngularJS application so it's a no-brainer to move away from AngularJS. </p> <p>While my fellow senior developers and I have some decent experience with React and TS already, these will be relatively new to most of our team - not to mention a major paradigm shift in tooling, libraries, etc.</p> <p>To help, I've been gathering a list of my favorite resources for learning React and Typescript - not just syntax and APIs but the approach.</p> <p>Please reply with your favorite resources! I'd love to know what helped you or your teams!</p> <p><strong>React</strong></p> <ul> <li><a href="https://reactjs.org/docs/getting-started.html">Docs</a></li> <li><a href="https://reactjs.org/tutorial/tutorial.html">Tutorial</a></li> <li><a href="https://overreacted.io/a-complete-guide-to-useeffect/">Complete Guide to useEffect</a></li> <li><a href="https://felixgerschau.com/react-component-composition/">Component Composition</a></li> <li><a href="https://lukeshiru.dev/articles/the-paired-hook-pattern">Paired Hook Pattern</a></li> <li><a href="https://programmingwithmosh.com/javascript/stateful-stateless-components-react/">Stateless Components</a></li> <li><a href="https://medium.com/technofunnel/working-with-react-pure-components-166ded26ae48">Pure Components</a></li> </ul> <p><strong>Typescript</strong></p> <ul> <li><a href="https://www.typescripttutorial.net/">Tutorials</a></li> <li><a href="https://2ality.com/2018/04/type-notation-typescript.html">Type Notation</a></li> <li><a href="https://react-typescript-cheatsheet.netlify.app/">React TS Cheatsheet</a></li> </ul> <p><strong>Other</strong></p> <ul> <li><a href="https://github.com/kettanaito/naming-cheatsheet">Naming Convention Cheatsheet</a></li> </ul> react typescript Mike Botsko Thu, 27 Oct 2022 18:55:02 +0000 https://dev.to/viveleroi/reducing-rerenders-in-nestedrecursive-components-3ij3 https://dev.to/viveleroi/reducing-rerenders-in-nestedrecursive-components-3ij3 <p><a href="https://codesandbox.io/s/elated-spence-70xdsy?file=/src/tree.js">Codesandbox</a></p> <p>I'm trying to decide how to port an old pure-js Tree library to React. Because tree components are recursive, no matter my approach I'm seeing rerenders (react devtools profiler w/"record why each component rendered" enabled) because state has changed and needs to be passed to children. </p> <p>I've been able to avoid rerendering childless nodes by only passing state setters, but since state has to be passed to children, any node with children renders. So if I click a node to select it, all nodes with children rerender.</p> <p>I'll need to eventually handle more than just an <code>isSelected</code> state, this is just a simple demo, but I can't figure out a good way to do this.</p> <p>I could write my own logic to determine if a parent node needs to render but it would need know if any child nodes have changed state. A recursive check is bad, so I was thinking of setting some kind of <code>isDirty</code> flag on parent nodes, but being fairly new to react I don't know if there are better ways.</p> <p>I'm hoping to avoid third party libraries as I'd like for this to be a public library eventually.</p> react help