React Context is used for globally passing items like isLoggedIn
, theme
, location
, etc.
In app-context.js
:
import { createContext } from "react";
const AppContext = createContext("Hello");
We can even pass useState
, objects, arrays in the createContext()
:
<AppContext.Provider value={{ name: "Maycnk" }}>
After creating context in the store, we wrap the component where we want context using <AppContext.Provider value={} >
. The value
is very important since whatever we want in the components is given with the value
attribute.
For using, we use the useContext(AppProvider)
hook.
We use it where we want to access the variables:
import AppContext from "./store/app-context";
function App() {
const ctx = useContext(AppContext);
return <div className="App">{ctx}</div>;
}
-
app-context.js
will have:const AppContext = createContext({ isLoggedIn: false, setlogin: () => {}, setlogout: () => {}, });
-
In
App.js
, the Context Provider will have:const [isLoggedIn, setIsLoggedIn] = useState(false); function setlogin() { setIsLoggedIn(true); } function setlogout() { setIsLoggedIn(false); } return ( <AppContext.Provider value={{ isLoggedIn, setlogin, setlogout }}> <Login></Login> </AppContext.Provider> );
-
In
Login
, we will useuseContext()
to consume this context. -
We will now convert the
<AppContext.Provider>
into a new component for better code readability.- We will make a new component as
AppProvider
:
function AppProvider({ children }) { const [isLoggedIn, setIsLoggedIn] = useState(false); function setlogin() { setIsLoggedIn(true); } function setlogout() { setIsLoggedIn(false); } return ( <AppContext.Provider value={{ isLoggedIn, setlogin, setlogout }}> {children} </AppContext.Provider> ); }
- We will make a new component as
Certainly! Here's a README.md file to explain the usage of useReducer
with the provided example:
In React, useReducer
is a Hook used for state management. It is an alternative to useState
when the state logic is more complex and involves multiple sub-values or when the next state depends on the previous one.
This README will guide you through the usage of useReducer
with a simple authentication example.
const [state, dispatch] = useReducer(reducer, initialState);
state
: Represents the current state managed by the reducer.dispatch
: A function used to dispatch actions to the reducer.reducer
: A function that specifies how the state should update in response to different actions.initialState
: The initial state of the reducer.
In our example:
const [authState, dispatchAuth] = useReducer(authReducer, initialAuthState);
authState
: Represents the current authentication state managed by theauthReducer
.dispatchAuth
: A function used to dispatch actions to theauthReducer
.authReducer
: The reducer function that handles authentication state transitions.initialAuthState
: The initial authentication state, whereisLoggedIn
is set tofalse
.
-
State Access: You can access the current state (
authState
) to read the authentication status. -
Dispatching Actions: You can dispatch actions to update the authentication state using
dispatchAuth
.
// Dispatching an action to login
dispatchAuth({
type: "Login",
});
// Dispatching an action to logout
dispatchAuth({
type: "Logout",
});
- Reducer Logic: Inside the
authReducer
, you define how the authentication state should change based on different action types. In our example, the reducer handles actions of type"Login"
and"Logout"
.
Suppose you have an authentication feature in your React application. You want to manage the authentication state (isLoggedIn
) and provide methods to login and logout.
First, define a reducer function that specifies how the state should update in response to different actions.
function authReducer(state, action) {
if (action.type === "Login") {
return {
isLoggedIn: true,
};
} else if (action.type === "Logout") {
return {
isLoggedIn: false,
};
} else {
return state;
}
}
Define the initial state for your reducer function.
const initialAuthState = {
isLoggedIn: false,
};
Create a component that utilizes useReducer
to manage the authentication state.
import React, { useReducer } from "react";
import AppContext from "../store/app-context";
function AppProvider({ children }) {
const [authState, dispatchAuth] = useReducer(authReducer, initialAuthState);
function setLogin() {
dispatchAuth({
type: "Login",
});
}
function setLogout() {
dispatchAuth({
type: "Logout",
});
}
return (
<AppContext.Provider
value={{ isLoggedIn: authState.isLoggedIn, setLogin, setLogout }}
>
{children}
</AppContext.Provider>
);
}
export default AppProvider;
For more information on useReducer
, refer to the React documentation.
In this example, we are utilizing the useEffect
hook in a React component to perform asynchronous operations and handle cleanup tasks. Let's break down the code step by step:
The primary purpose of this code is to monitor changes in the email
and password
fields of a form, and perform validation after a certain delay. Additionally, it ensures that a cleanup function is executed when the component unmounts or when the dependencies (email
and password
) change.
useEffect(() => {
const timeoutId = setTimeout(() => {
console.log("Checking if form is valid");
setIsFormValid(email.trim().length > 5 && password.trim().length > 5);
}, 500);
return () => {
console.log("CLEANUP");
clearTimeout(timeoutId);
};
}, [email, password]);
- This
useEffect
hook is called every time theemail
orpassword
fields change. - Inside the hook, a timeout function is set using
setTimeout
. This function executes after 500 milliseconds. - Within the timeout function, the validity of the form is checked based on the length of the
email
andpassword
fields. If both have a length greater than 5 (trimmed to remove whitespace),isFormValid
is set totrue
, otherwisefalse
. - The
return
statement defines a cleanup function, which clears the timeout when the component unmounts or whenemail
orpassword
change.
The useEffect
hook is a powerful tool in React for managing side effects in functional components.
Fetch is a modern interface for fetching resources over the network. It is a native JavaScript API that provides a more powerful and flexible way to make HTTP requests compared to traditional XMLHttpRequest.
- Simple and intuitive API
- Supports all modern browsers
- Allows handling of request and response bodies in various formats
- Provides built-in support for promises, making it easier to work with asynchronous code
npm install whatwg-fetch --save
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error:", error);
}
}
fetchData("https://api.example.com/data");
fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));
For detailed documentation and examples, please refer to the Fetch API documentation.
Axios is a popular Promise-based HTTP client for the browser and Node.js. It provides an easy-to-use API for making HTTP requests and handling responses.
- Supports modern browsers and Node.js
- Simple API for making HTTP requests
- Interceptors for request and response handling
- Automatic transformation of JSON data
- Promise-based API for handling asynchronous operations
npm install axios --save
const axios = require("axios");
async function fetchData(url) {
try {
const response = await axios.get(url);
console.log(response.data);
} catch (error) {
console.error("Error:", error);
}
}
fetchData("https://api.example.com/data");
const axios = require("axios");
axios
.get("https://api.example.com/data")
.then((response) => console.log(response.data))
.catch((error) => console.error("Error:", error));
For detailed documentation and examples, please refer to the Axios documentation.
Promises are a feature of JavaScript that provides a way to handle asynchronous operations. They represent a value that may be available now, or in the future, or never.
- Simplifies asynchronous programming
- Provides a clean and intuitive syntax
- Allows chaining of multiple asynchronous operations
- Supports error handling with catch method
- Compatible with modern JavaScript features like async/await
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function exampleAsyncFunction() {
try {
await delay(1000);
console.log("Async operation completed successfully");
} catch (error) {
console.error("Error:", error);
}
}
exampleAsyncFunction();
const promise = new Promise((resolve, reject) => {
// Asynchronous operation
setTimeout(() => {
resolve("Operation completed successfully");
}, 1000);
});
promise
.then((result) => {
console.log(result);
})
.catch((error) => {
console.error("Error:", error);
});
For detailed documentation and examples, please refer to the MDN Web Docs on Promises.