What are the differences between context, hooks, and props in React?

What are the differences between context, hooks, and props in React?

In React, props are used to pass data from parent to child components, while context provides a way to share values across the component tree without passing props manually at every level. Hooks, on the other hand, are functions that let you use state and other React features in functional components.

Can you give me an example of how to use context?

Sure! You can create a context using React.createContext(), then use a Provider to wrap your component tree. Any component within that tree can access the context value using the useContext hook.

What about hooks? How do they work?

Hooks allow you to use state and lifecycle methods in functional components. For example, useState lets you add state to a functional component, while useEffect lets you perform side effects like data fetching.

When should I use context instead of props?

Use context when you need to pass data through many layers of components without prop drilling. It's great for global state or theming.