Search for a command to run...
No comments yet. Be the first to comment.
What is Managed File Transfer (MFT)? Every organization exchanges files. Banks transfer transaction records, retailers exchange inventory updates, hospitals share medical data, and manufacturing compa
Steps to Install Jenkins: Clone the repo https://github.com/mkhansab/install-jenkins-docker and follow the 4 steps present at README.md at this repo Opening http://localhost:8080/ will ask for Admin
Understand how EC2 Instance Metadata Service works, why IMDSv2 was introduced, and how it protects against SSRF attacks.
Imagine waking up in a world without the internet: No way to instantly message your friends or see what’s trending on social media. No ability to stream music, attend virtual classes, or play online
Overview O(n²) Time Complexity in all cases. Does less “Memory writes” when compared with other algorithms such as Quick sort, Merge sort, Insertion sort and Bubble sort. However, not an optimal algorithm in terms of “Memory writes”. There is othe...
useState()The purpose of useState is to handle reactive data. Any data that changes in the application is called state. When the state changes you want react to update the UI, so the latest changes are reflected to the end user.
const [count, setCount] = useState(0)
useState()returns an array with 2 values:
Current state
In our example, count is the state variable which is set to 0. This initial state can be a number, boolean, string, or object
Set function to update the state.
You can update the state in two ways:
i. Directly passing the next state
setCount(2)// Now, the updated state ofcount will be 2.
ii. Using function
setCount( prevCount => prevCount + 1)In this function, we check the current state which is 2. The value ofprevCountwill be 2, thenwe increment it by 1.
Docs:https://react.dev/reference/react/useState#usage
useEffect()useEffect is a Hook in React that allows you to synchronise a component with an external system. It is a way to handle side effects, such as fetching data or subscribing to a event in a functional component.
useEffect(() => {
console.log('count changed')
},[count])
Here, the `count changed ` will be logged every time the count changes.
useEffecttakes two arguments:
A callback function
The callback function is called after the component has rendered.
A list of dependencies
The list of dependencies is used to determine when to re-run the effect, by comparing the current values of the dependencies to the previous values.
In the callback function, you can perform any side effects, such as fetching data or subscribing to an event. You can also return a cleanup function, which is called before the component is unmounted or the effect is re-run.
Note:
If you don’t pass dependencies the effect will re-run on every render of component.
When state variables are used in useEffect , make sure to include in dependency array.
Make sure to handle side effects, with a cleanup function.
Docs:https://react.dev/reference/react/useEffect#reference
useContext()useContext is a way to manage state globally without passing props down through multiple levels of the component tree.
Prop Drilling: Prop drilling refers to the process of passing down props through multiple layers of components, even when some of those components do not directly use the props. We can solve this problem using
useContext()
Three things to understand:
Creating context
const EmailContext = React.createContext(null);
Provide a value for the context using ContextName.Provider
function App() {
const value = { email: "in.mohsin@outlook.com" };
return (
<EmailContext.Provider value={value}>
<Child />
</EmailContext.Provider>
);
}
Use useContext() in the component that needs to consume the context
function Child() {
const context = useContext(EmailContext);
return <div>The email is: {context.email}</div>;
}
When the context value is updated by the provider, the component consuming the context re-renders automatically. This allows the component to always have the latest data.