React Hooks

React Hooks are special functions that let you use React features (like state and lifecycle methods) inside functional components, without writing class components.

useState

The useState hook is used to declare state variables in functional components. It allows us to read and update the state within the component.

Syntax

const [state, setState] = useState(initialState);

• state: The current value of the state.
• setState: A function used to update the state.
• initialState: The initial value of the state, which can be a primitive type or an object/array

useReducer: The useReducer hook is a more advanced state management hook used for handling more complex state logic, often involving multiple sub-values or more intricate state transitions.

Syntax

const [state, dispatch] = useReducer(reducer, initialState);

• state: The current state value.
• dispatch: A function used to dispatch actions that will update the state.
• reducer: A function that defines how the state should change based on the dispatched action.
• initialState: The initial state value.

useContext

The useContext hook in React is a powerful and convenient way to consume values from the React Context API in functional components. It allows functional components to access context values directly, without the need to manually pass props down through the component tree

const contextValue = useContext(MyContext);

• The useContext hook takes a context object (MyContext) as an argument and returns the current value of that context.
• The contextValue will hold the value provided by the nearest in the component tree.

useEffect:

The useEffect hook in React is used to handle side effects in functional components. It allows you to perform actions such as data fetching, DOM manipulation, and setting up subscriptions, which are typically handled in lifecycle methods like componentDidMount or componentDidUpdate in class components.

Syntax

useEffect(() => {
    // Side effect logic here
}, [dependencies]);

• useEffect(() => { ... }, [dependencies]); runs side effects after rendering.
• The effect runs based on changes in the specified dependencies.

useLayoutEffect: The useLayoutEffect is used when we need to measure or manipulate the lawet before the browser paints, ensuring smooth transitions and no flickering.

Syntax

useLayoutEffect(() => {
  // Logic to manipulate layout or measure DOM elements
}, [dependencies]);

useInsertionEffect: The useInsertionEffect is designed for injecting styles early, especially useful for server-side rendering (SSR) or styling libraries, ensuring styles are in place before the component is rendered visually.

Syntax

useInsertionEffect(() => {
    // Logic to inject styles or manipulate stylesheets
}, [dependencies]);

useRef

• useRef is a React Hook that lets you create a mutable reference object.
• It is often used to:

1. Access and control DOM elements directly.
2. Store values that don’t cause re-render when updated.

Syntax:

const refName = useRef(initialValue);

• Returns an object: { current: initialValue }
• The value inside current can be read or changed.