# useContext | React Hooks

**Redux manage the global state but 
useState() and useReducer()  manage the local state in the component.
**
So Redux is a global state manager.

*ContextAPI is same as Redux , but it's built-in in React , and it has a different syntax.*

**the context consumer component can be used in both functional and class based component.**

what is the solution for the consumer long term ?

Example:
```
<AuthContext.Consumer>
      {(ctx) =>
        <nav className={classes.nav}>
          <ul>
            {ctx.isLoggedIn && (
              <li>
                <a href="/">Users</a>
              </li>
            )}
          </ul>
        </nav>

      }
</AuthContext.Consumer>
```


**Solution:**

```
function User() { 
const ctx = useContext(UserContext);

    return (
        <nav className={classes.nav}>
          <ul>
            {ctx.isLoggedIn && (
              <li>
                <a href="/">Users</a>
              </li>
            )}
          </ul>
        </nav>
       }
     )

}
```







![Screenshot (193).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655283912925/qh7Rd6p1k.png align="left")


![Screenshot (194).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655283959946/xhbMOsx4q.png align="left")


```
==================================
```


![Screenshot (195).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655283998518/j2ynO0PCL.png align="left")


![Screenshot (196).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655284041426/qfUvd8Fa4.png align="left")

```
=============================================
```

![Screenshot (197).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655284075795/B6c4uPnW-.png align="left")


![Screenshot (198).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655284112747/GY02IeACg.png align="left")


Note : 
*AuthContext:  Auth-Context  is not a component

 AuthContext.Provider : Auth-Context provider is a component
  we can use in our JSX code, and we can wrap it around other 
  components and those other components and all their descendant components.
*



![Screenshot (204).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655322195984/2WtN7IRli.png align="left")






![Screenshot (205).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655322206912/J5v81zLlU.png align="left")