Unlocking React's Power: Understanding Core Hooks

React hooks have transformed the way developers write components, offering more power and flexibility when it comes to managing state, side effects, and other features in functional components. Let’s dive into some of the main hooks that every React developer should know.

i) useState

The useState hook is fundamental for managing state in functional components. It allows you to create state variables that React will remember between renders.

const [count, setCount] = useState(0)
setCount(1)

• count: This variable holds the current state value.

• setCount: This function is used to update the state.

• useState(0): This initializes the state with a value of 0.

• setCount(1): This changes the count value to 1.

With useState, you can track various types of data within a component, such as form inputs, counters, and more. When you update the state using setCount, React will re-render the component to reflect the new state.

ii) useEffect

The useEffect hook is perfect for handling side effects in your components, such as fetching data, interacting with browser APIs, or setting up subscriptions.

useEffect(() => {
	addListerners()
    return() => {
    	removeListeners()
    }
})

useEffect(() => {
	fetchUserInfo(userID)
}, [userID]

• addListeners(): Runs after the component's initial render, adding any necessary event listeners.

• removeListeners(): Cleans up by removing listeners right before the component unmounts.

• fetchUserInfo(userID): Fetches user information after the first render and whenever userID updates.

useEffect is extremely versatile. It can be configured to run only once on mount, after every render, or only when certain dependencies change. This makes it essential for handling side effects in your components.

iii) useRef

The useRef hook is a versatile tool in React that allows you to create a reference to a DOM element or a value that persists across renders without causing re-renders.

const refContainer = useRef(0)

• const refContainer: This creates a reference object with an initial value of 0. The refContainer will persist across renders and can hold any value.

useRef is commonly used for interacting with DOM elements, such as managing focus, playing or pausing videos, or storing any mutable value that should persist without triggering re-renders.

iv) useMemo

useMemo is used to memoize expensive calculations, ensuring they are only recalculated when necessary. This can improve performance by preventing unnecessary re-renders.

const area = useMemo(() => {
	return calcSurfaceArea(size)
}, [size])

• const area: Holds the memoized value returned by calcSurfaceArea.

• [size]: The area value will only update when size changes.

By using useMemo, you can optimize your component's performance, especially when dealing with costly operations like data processing or complex calculations.

v) useCallback

Similar to useMemo, useCallback returns a memoized version of a function, which only changes when its dependencies change. This is useful when passing callbacks to child components.

const handleRenderArea = useCallback(() => {
	return updateSurfaceArea(size)
}, [size])

• const handleRenderArea: A memoized version of updateSurfaceArea.

• [size]: handleRenderArea updates only when size changes.

useCallback is particularly handy when working with React components that rely on reference equality to prevent unnecessary renders, such as those using React.memo.

vi) useContext

The useContext hook lets you subscribe to React context without introducing nested components or prop drilling. It returns the current value of a context object created with React.createContext.

const value = useContext(ThemeContext)

• const value: The current context value, which could be anything from a theme to user data.

• ThemeContext: The context object providing the value.

useContext simplifies consuming context values, making your components cleaner and more modular.

vii) useReducer

For more complex state management logic, useReducer is your go-to hook. It's similar to useState but gives you more control over state transitions.

const[state, dispatch] = useReducer(updateCount, {count: 0})

const updateCount = (state, action) => {
	switch (action.type) {
    	case 'increment':
        	return {count: state.count + 1}
        case 'decrement':
        	return {count: state.count - 1}
        default:
        	throw new Error();
    }
}

dispatch({type: 'decrement'})

• state: Contains the current state value.

• dispatch: A function used to trigger state updates.

• const updateCount {...}: A reducer function that takes the current state and an action object, then returns the new state.

• dispatch({type: 'decrement'}): Calls updateCount with an action to update the state.

useReducer is particularly useful when dealing with more complex state logic, like managing multiple related states or handling state based on user actions.

source: dev.to