Welcome to the React Advanced Hooks Boilerplate!
This repository is designed to provide a solid starting point for working with advanced React hooks, including useRef, useReducer, useLayoutEffect, and custom hooks. Navigate through various examples and understand the practical implementation of these hooks in a React application.
You can check out a Demo of this boilerplate here.
- Clone the repository to your local machine.
- Install the required dependencies using
npm install. - Start the development server using
npm run dev.
This boilerplate is structured to give you a hands-on experience and understanding of some of the advanced hooks in React. Each hook is demonstrated with practical examples to showcase its utility and implementation in real-world applications.
- Purpose: Manage and retain state without causing re-render of the component.
- Examples:
- Dom Elements Example: Demonstrates how to reference DOM elements.
- Managing Instances Example: Illustrates managing instances with
useRef. - Preserving Values Example: Showcases preserving values between renders without causing re-renders.
- Purpose: Manage state logic in components with a reducer function for more predictable state transitions.
- Examples:
- Basic State Example: Basic implementation of
useReducer. - Complex State Example: Handling complex state logic with
useReducer.
- Basic State Example: Basic implementation of
- Purpose: Perform synchronous, side-effects that need to be executed before the DOM is painted.
- Examples:
- Example One: Basic usage of
useLayoutEffect. - Example Two: Another practical example of
useLayoutEffect.
- Example One: Basic usage of
- Purpose: Reuse stateful logic and side effects across components.
- Examples:
- useFetchData: Custom hook for fetching data.
- useGeolocation: Custom hook for accessing geolocation.
Tip: Before you decide to delete all components and start from scratch, we suggest examining them closely to grasp their structure. They can act as a blueprint for your future work.
We hope this guide helps you navigate and make the most out of this boilerplate.
Happy coding, Technigo students! ❤️