Simple Guide to React Hooks
Tags: webdev, react, tutorial, beginners
Published: 2023-10-16 21:45:07

Hey everyone,


###### _The following is a only summary of the article "Introduction to React Hooks" from bluesockets.com. [Go to post](https://bluesockets.com/react/introduction-to-react-hooks/)_


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.

```jsx
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>
 );
}
```

2. **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.

```jsx
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>
 );
}
```

3. **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. 

```jsx
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>
 );
}
```

4. **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.

```jsx
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](https://bluesockets.com/react/introduction-to-react-hooks/) 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!