https://github.com/arjuncvinod/react-hooks
React Hooks implementation with example
https://github.com/arjuncvinod/react-hooks
usecallback usecontext useeffect useimperativehandle uselayouteffect usememo usereducer useref usestate
Last synced: 6 months ago
JSON representation
React Hooks implementation with example
- Host: GitHub
- URL: https://github.com/arjuncvinod/react-hooks
- Owner: arjuncvinod
- License: mit
- Created: 2023-12-10T12:28:07.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-23T17:36:19.000Z (almost 2 years ago)
- Last Synced: 2025-03-26T07:51:16.381Z (6 months ago)
- Topics: usecallback, usecontext, useeffect, useimperativehandle, uselayouteffect, usememo, usereducer, useref, usestate
- Language: JavaScript
- Homepage: https://react-hooks-acv.vercel.app/
- Size: 235 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Hooks Implementation
## [Live Demo](https://react-hooks-acv.vercel.app/)
## Hooks
### 1. [useState](https://github.com/arjuncvinod/React-hooks/blob/master/src/useState/UseState.jsx)
`useState` is a hook that allows functional components to manage local state. It returns a stateful value and a function to update it, enabling you to create dynamic and interactive UIs.
### 2. [useEffect](https://github.com/arjuncvinod/React-hooks/blob/master/src/useEffect/UseEffect.jsx)
`useEffect` is used for side effects in functional components. It lets you perform tasks like data fetching, subscriptions, or manually changing the DOM in a clean and efficient way.
### 3. [useRef](https://github.com/arjuncvinod/React-hooks/blob/master/src/useRef/UseRef.jsx)
`useRef` returns a mutable object called a `ref` object, which has a `.current` property. It is commonly used to access and interact with the DOM directly or to persist values across renders without causing re-renders.
### 4. [useReducer](https://github.com/arjuncvinod/React-hooks/blob/master/src/useReducer/UseReducer.jsx)
`useReducer` is a powerful alternative to `useState` for managing more complex state logic. It accepts a reducer function and an initial state, providing a dispatch function to update the state based on actions.
### 5. [useLayoutEffect](https://github.com/arjuncvinod/React-hooks/blob/master/src/useLayoutEffect/UseLayoutEffect.jsx)
`useLayoutEffect` is similar to `useEffect` but fires synchronously after all DOM mutations. It's useful when you need to perform measurements or manipulate the DOM immediately after the browser paints.
### 6. [useImperativeHandle](https://github.com/arjuncvinod/React-hooks/tree/master/src/useImperativeHandle/UseImperativeHandle.jsx)
`useImperativeHandle` customizes the instance value that is exposed when using `React.forwardRef`. It allows you to control which properties of the component are exposed to the parent component when using `ref`.
### 7. [useContext](https://github.com/arjuncvinod/React-hooks/tree/master/src/useContext/UseContext.jsx)
`useContext` is used to consume values from a React context. It allows functional components to subscribe to a context's changes, providing a more straightforward way to share values like themes or authentication states.
### 8. [useMemo](https://github.com/arjuncvinod/React-hooks/tree/master/src/useMemo/UseMemo.jsx)
`useMemo` memoizes the result of a function, preventing unnecessary recalculations. It is beneficial for optimizing performance by caching expensive calculations or references.
### 9. [useCallback](https://github.com/arjuncvinod/React-hooks/tree/master/src/useCallback/UseCallback.jsx)
`useCallback` memoizes a callback function, preventing it from being recreated on each render. It is useful when passing callbacks to child components to avoid unnecessary re-renders.