React Hooks By Example

Set of step by step guide examples covering React Hooks, from start to advanced cases.

About this examples:

• Each example is focused in a topic (simple and straightforward).
• Each example contains a Readme.md with an step by step guide to reproduce it.

Examples implemented

List of examples:

• 00-boiler-plate: starting point, just a blank create-react-app project (all examples will take this as starting point)
• 01-use-state: adding state (simple element) to a functional component.
• 02-use-state-object: adding state (object) to a functional component.
• 03-component-did-mount: executing some operations when a functional component gets mounted.
• 04-component-unmount: executing cleanup code when a functional component gets unmounted.
• 05-mount-did-update: hooking to mount and component update events.
• 06-ajax-field-change: triggering an ajax call whenever a given field gets updated.
• 07-custom-hooks: creating our custom hook, great to simplify components and get reusable assets.
• 08-pure-component: creating pure functional components.
• 09-pure-component-callback: creating pure functional components, that include function properties in their props.
• 10-use-reducer: useReducer effect, including dispatch.
• 11-use-context: using the useContext hook to get access to the context in one line of code.
• 12-async-closure: advanced case, getting fresh data from useState on callbacks.
• 13-promise-unmounted: tracking when component is mounted/unmounted to avoid perform a state update on an unmounted component.
• 14-useref-dom: using useRef hook to access a DOM element child.
• 15-memo-predicate: enhancing rendering performance hooking to 'shouldComponentUpdate'.
• 16-use-debug-value: using built-in hook useDebugValue.
• 17-why-did-you-update: implementing a custom hook to avoid unnecesary re-renders.

About Basefactor + Lemoncode

We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.

Basefactor, consultancy by Lemoncode provides consultancy and coaching services.

Lemoncode provides training services.

For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend