Kent Dodds - Advanced hooks

Kent Dodds is a pretty famous (at least in React land) trainer, conference presenter and blogger. Has courses on egghead.io and more

Has a his own training workshop series on react: https://kentcdodds.com/workshops/

I saw he had an online training coming up and really wanted to participate and learn from him. I've worked with hooks such as useEffect and useCallback so I decided to step up to the Advanced Hooks course, more: https://kentcdodds.com/workshops/advanced-react-hooks


I'm leaning advanced hooks myself so my intent is not to teach you how to use these hooks. My intent is to share my experience and the materials to inspire and guide you to learn more yourself.

Do prepare in advance of the course: 

- setup zoom

- his KCD workshop prep

- pre-requisite material

- the coursework itself


Kent moves quickly in his online courses

His intent is not that you learn everything and get all exercises working in the training session. So you have to revisit later

Kent also drops a lot of extra cirricular material, blog posts, libraries etc. so you learn more than just the coursework. Checkout the following list:

Why react hooks: 

  • https://www.recallact.com/presentation/why-react-hooks

  • https://youtu.be/zWsZcBiwgVE?list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf

  • "
This is a really cool video that both goes into a bit of how hooks work, and then how useful composition via hooks can be (the second half, with Michael Jackson).
"" https://www.youtube.com/watch?v=1jWS7cCuUXw&t=3327s



Kents egghead course http://kcd.im/refactor-react



React state and usecontext hook

  • https://kentcdodds.com/blog/how-to-use-react-context-effectively

  • https://kentcdodds.com/blog/how-to-optimize-your-context-value

  • https://kentcdodds.com/blog/application-state-management-with-react

  • https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster

  • https://kcd.im/colocation


  Q. would you have 1 single context for the app or multiples?

  A. Kent prefers to avoid single global context, he prefers to separate by domain

  such as modal context, other context etc. read more on:

  • https://kentcdodds.com/blog/application-state-management-with-react
  • https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster



State Colocation

  • https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster

  • https://kentcdodds.com/blog/colocation


State machine in js

  • 
https://github.com/tannerlinsley/react-query

  • https://kentcdodds.com/blog/implementing-a-simple-state-machine-library-in-javascript



Use memo and useCallback

  • 
https://kentcdodds.com/blog/usememo-and-usecallback



Composition vs Prop drilling

  • 
https://twitter.com/mjackson/status/1195495535483817984





Immer

  • https://immerjs.github.io/immer/docs/introduction



Codebases to learn from

reach-ui codebase is really cool to checkout, good use of patterns etc

downshift.js also pretty cool

  • https://github.com/reach/reach-ui

  • https://github.com/downshift-js/downshift

  • https://github.com/tannerlinsley/react-query
  • https://github.com/tannerlinsley/react-table



A GREAT talk on state and why redux isn't needed w/ context/reducers

  • https://www.youtube.com/watch?v=tBz3UmZG_bk


The Advanced Hooks course on github: https://github.com/kentcdodds/advanced-react-hooks So what does the course cover?

💪 01. useReducer: simple Counter

💪 02. useCallback: custom hooks

💪 03. useContext: simple Counter

💪 04. useLayoutEffect: auto-growing textarea

💪 05. useImperativeHandle: scroll to top/bottom

💪 06. useDebugValue: useMedia



more

useReducer in OT

Mattia Richetto

https://github.com/opentable/gc-monorepo-admin/blob/master/apps/gallery-photos/src/store/reducer.ts


and also for useContext:

https://github.com/opentable/gc-monorepo-admin/blob/master/apps/gallery-photos/src/common/GlobalStateProvider/GlobalStateProvider.tsx


Andrew

My tiny contribution: https://github.com/opentable/consumer-frontend/blob/master/src/app/components/CovidDataCenter/Container.js#L21-L30


Comments

Post a Comment

Popular posts from this blog

My Reading Lists

I had some time over Christmas and decided to organize my reading lists. Interesting how some time away from daily work allows one to raise up your head   Uncle Bob on Principles of OOd See also book: Agile Principles, Patterns, and Practices in C# Available on Safari Books online. Algorithms in a Nutshell Nine   Algorithms   That Changed   the Future Programming Pearls book: http://www.cs.bell-labs.com/cm/cs/pearls/toc.html 97 Things Every Programmer Should Know Seven L a nguages http://pragprog.com/book/btlang/seven-languages-in-seven-weeks Codys book : http://www.domenlightenment.com/ Principles of OO programming: http://www.nczonline.net/blog/2012/12/18/now-available-principles-of-object-oriented-programming-in-javascript-beta/ Object Oriented programming with Stefan Stoy... Chrome V8 : http://code.google.com/p/v8/ https://developers.google.com/v8/ https://developers.google.com/v8/design - read this Mozilla Javascript page ...
Read more

angular js protractor e2e cheatsheet

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l...
Read more

react-select stacking order bug, z-index, layers and stacking

Image
Had to fix a tricky bug related to react-select recently (our Dropdown component wraps react-select). Here's the how the bug manifested. Dropdown does not overlay dynamically added content below it Variations of this have been reported since 2017. But I tried all the suggestions in the comments and none worked for me. I also tried wrapping the Dropdown in a div and changing z-index to be higher as well as making absolute position but no success. Changing the elements order in the html source and then reordering using flexbox order does work but it breaks the tabbing flow and is not recommended from an accessibility standpoint. One issue is the Dropdown is in a container and is constrained by the containers z-index. No matter how I change the Dropdowns z-index, its container is stacked below the next in stacking order. Google Chrome debugger layers tool provides a cool way to visualize layers. Could be better but helps, check it out below. You have to look closely but you can see h...
Read more