https://github.com/Lemoncode/react-hooks-by-example

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.
https://github.com/Lemoncode/react-hooks-by-example

Last synced: 3 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/Lemoncode/react-hooks-by-example
• Owner: Lemoncode
• License: mit
• Created: 2019-05-05T14:38:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-03-05T09:58:17.000Z (over 2 years ago)
• Last Synced: 2024-04-27T18:33:40.036Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.13 MB
• Stars: 363
• Watchers: 9
• Forks: 84
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        

[](https://lemoncode.net/) 

[](https://github.com/Lemoncode/react-hooks-by-example/blob/master/Readme_es.md)

[](https://github.com/Lemoncode/react-hooks-by-example/blob/master/Readme.md)

  







# 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