Simple Guide to React Hooks

Hey everyone,

The following is a only summary of the article "Introduction to React Hooks" from bluesockets.com. Go to post

React Hooks have revolutionized the way we write functional components in React. They provide a simpler and more concise way of managing state and side effects, making our code easier to understand, test, and maintain.

Rules of React Hooks:

1. Only call hooks at the top level: Hooks should be called directly inside functional components or custom hooks, but not inside loops, conditions, or nested functions.

2. Call hooks in the same order every time: The order in which hooks are called should remain consistent across renders of the component. This helps React keep track of the state associated with each hook correctly.

3. Only call hooks from React functions: Hooks should only be called from within React components or custom hooks. Don't call hooks from regular JavaScript functions.

Commonly Used React Hooks:

1. useState

The useState hook is used to add state to functional components.

import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</button>
   </div>
 );
}

1. useEffect

The useEffect hook allows us to perform side effects in functional components. It takes a function as its first argument, which will be executed after the component renders.

import React, { useState, useEffect } from 'react';

function Timer() {
 const [seconds, setSeconds] = useState(0);

 useEffect(() => {
   const interval = setInterval(() => {
     setSeconds(prevSeconds => prevSeconds + 1);
   }, 1000);

   return () => {
     clearInterval(interval);
   };
 }, []);

 return (
   <div>
     <p>Seconds: {seconds}</p>
   </div>
 );
}

1. useContext

The useContext hook is used to consume values from the React context. It accepts a context object created by React.createContext and returns the current context value.

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function MyProvider({ children }) {
 const sharedData = 'Hello from context!';

 return (
   <MyContext.Provider value={sharedData}>
     {children}
   </MyContext.Provider>
 );
}

function MyConsumer() {
 const sharedData = useContext(MyContext);

 return <p>{sharedData}</p>;
}

function App() {
 return (
   <MyProvider>
     <div>
       <h1>My App</h1>
       <MyConsumer />
     </div>
   </MyProvider>
 );
}

1. useRef

The useRef hook returns a mutable ref object whose .current property can be used to store a value. It allows us to access and manipulate the underlying DOM or React element.

import React, { useRef } from 'react';

function TextInput() {
 const inputRef = useRef(null);

 const focusInput = () => {
   inputRef.current.focus();
 };

 return (
   <div>
     <input type="text" ref={inputRef} />
     <button onClick={focusInput}>Focus Input</button>
   </div>
 );
}

The article also covers creating custom hooks which is a must know if want to create clean React code.

By understanding and using hooks effectively, developers can build cleaner, more maintainable React applications.

Of course, this post did not cover every React Hook, but the ones covered are most certainly the ones you will commonly see and use.

Feel free to ask any questions or share your experiences with React Hooks!