Hooks are react feature that was introduced in React 16.8 and this allows the developers to use state and react other features in functional components. Before the introduction of Hooks these features available only in class components.Hooks provide a way to manage state, handle side effects, and access lifecycle methods in functional components without the need for class components.
Here are some commonly used Hooks
- useState - This hook allow you to add state to functional component and make it statefull function. useState return a state variable and a function to update the state variable.
Syntax-
const [stateVariable,functionToUpdateVariable] = useState(initialValue)
const [isOpen,setIsOpen] = useState(false)
Example-
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
</div>
);
};
export default Counter
OUTPUT-
2) useEffect - This hook is used for handling side effects in functional components, such as fetching data, subscribing to events, or manually changing the DOM. It accepts a callback function and runs it after the component has rendered.
Syntax-
useEffect(callback, dependencies)
useEffect(()=>{},[dependencies])
Example-
import "./App.css";
import React, { useEffect, useState } from "react";
const DataFetch = () => {
const [data, setData] = useState([]);
useEffect(() => {
// Fetch data from an API
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((data) => {
setData(data);
console.log("Data", data);
});
}, []);
return (
<div>
<h1>Name: {data[0]?.name}</h1>
<h1>Name: {data[1]?.name}</h1>
<h1>Name: {data[2]?.name}</h1>
</div>
);
};
export default DataFetch;
OUTPUT-
3) useContext- The useContext hook in React allows you to consume a context within a functional component. It provides a way to access the current value of a context created using the createContext() function.
Syntax-
const value = useContext(Context);
Example-
import React, { useContext } from "react";
// Create a context
const MyContext = React.createContext();
// Create a component that provides the context value
const Parent = () => {
const contextValue = "Hello, My Name is Himanshu Baghel";
return (
<MyContext.Provider value={contextValue}>
<Child />
</MyContext.Provider>
);
};
// Create a component that consumes the context
const Child = () => {
// Consume the context using useContext
const contextValue = useContext(MyContext);
return <p>{contextValue}</p>;
};
// Render the parent component
const App = () => {
return <Parent />;
};
export default App;
OUTPUT-
Top comments (2)
So, in the third hook, in case we want to define the "Child" component in a different file, can we pass
MyContextvariable as a prop to the child component and then use the prop inside the child component in the other file in the below manner?Parent.jsx:
Child.jsx:
First of all thanks for your time. and Yes, Your code is correct and also you can take props as array destructuring through this you can access value directly like this .
parent.js
Child-
Output-
Thank you