# react-hooks-by-example

**Repository Path**: mirrors_RbkGh/react-hooks-by-example

## Basic Information

- **Project Name**: react-hooks-by-example
- **Description**: The goal of this project is to provide a set of react hooks step by step guided examples, coverting from starter scenarios to advanced topics.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-25
- **Last Updated**: 2026-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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 on a topic (simple and straightforward).
- Each example contains a Readme.md with a step by step guide to reproduce it.

# Examples implemented

List of examples:

- [00-boiler-plate](https://github.com/Lemoncode/react-hooks-by-example/tree/master/00-boilerplate): starting point, just a blank create-react-app project (all examples will take
  this as starting point).
- [01-use-state](https://github.com/Lemoncode/react-hooks-by-example/tree/master/01-use-state): adding state (simple element) to a functional component.
- [02-use-state-object](https://github.com/Lemoncode/react-hooks-by-example/tree/master/02-use-state-object): adding state (object) to a functional component.
- [03-component-did-mount](https://github.com/Lemoncode/react-hooks-by-example/tree/master/03-component-did-onload): executing some operations when a functional component gets mounted.
- [04-component-unmount](https://github.com/Lemoncode/react-hooks-by-example/tree/master/04-component_unmount): executing cleanup code when a functional component gets unmounted.
- [05-mount-did-update](https://github.com/Lemoncode/react-hooks-by-example/tree/master/05-component-update-render): hooking to mount and component update events.
- [06-ajax-field-change](https://github.com/Lemoncode/react-hooks-by-example/tree/master/06-ajax-field-change): triggering an ajax call whenever a given field gets updated.
- [07-custom-hooks](https://github.com/Lemoncode/react-hooks-by-example/tree/master/07-custom-hook): creating our custom hook, great to simplify components and get reusable assets.
- [08-pure-component](https://github.com/Lemoncode/react-hooks-by-example/tree/master/08-pure-component): creating pure functional components.
- [09-pure-component-callback](https://github.com/Lemoncode/react-hooks-by-example/tree/master/09-pure-component-callback): creating pure functional components, that include function properties
  in their props.
- [10-use-reducer](https://github.com/Lemoncode/react-hooks-by-example/tree/master/10-use-reducer): _useReducer_ effect, including dispatch.
- [11-use-context](https://github.com/Lemoncode/react-hooks-by-example/tree/master/11-use-context): using the _useContext_ hook to get access to the context in one line of code.
- [12-set-state-func](https://github.com/Lemoncode/react-hooks-by-example/tree/master/12-set-state-func): Whe calling _setState_ how to ensure we are
  using the latest state value.
- [13-async-closure](https://github.com/Lemoncode/react-hooks-by-example/tree/master/13-async-closure): advanced case, getting fresh data from _useState_ on callbacks.
- [14-useref-dom](https://github.com/Lemoncode/react-hooks-by-example/tree/master/14-use-ref-dom): using _useRef_ hook to access a DOM element child.
- [15-promise-unmounted](https://github.com/Lemoncode/react-hooks-by-example/tree/master/15-promise-unmounted): tracking when component is mounted/unmounted to avoid perform a state update on an unmounted component.
- [16-memo-predicate](https://github.com/Lemoncode/react-hooks-by-example/tree/master/16-memo-predicate): enhancing rendering performance hooking to 'shouldComponentUpdate'.
- [17-use-debug-value](https://github.com/Lemoncode/react-hooks-by-example/tree/master/17-use-debug-value): using built-in hook _useDebugValue_.
- [18-why-did-you-update](https://github.com/Lemoncode/react-hooks-by-example/tree/master/18-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](http://www.basefactor.com) provides consultancy and coaching services.

[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.

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