React Life cycle Method
ComponentDidMount - componentdidmount is execute first rendering. Executed on the client side only after the first render. Is executed after first render only on the client side.
ComponentDidUpdate - is called just before rendering. Called just before rendering takes place in the DOM. the componentdidupdate has two parameter next preProps, preState
componentWillUnmount - Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.
Some of the most important lifecycle methods are:
componentWillMount() – Executed just before rendering takes place both on the client as well as server-side.
componentDidMount() – Executed on the client side only after the first render.
componentWillReceiveProps() – Invoked as soon as the props are received from the parent class and before another render is called.
shouldComponentUpdate() – Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.
componentWillUpdate() – Called just before rendering takes place in the DOM.
componentDidUpdate() – Called immediately after rendering takes place.
componentWillUnmount() – Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.
Functional component all useeffect hook ………………
What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.
Why is useEffect called inside a component? Placing useEffect inside the component lets us access the count state variable (or any props) right from the effect. We don’t need a special API to read it — it’s already in the function scope. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.
Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update. (We will later talk about how to customize this.) Instead of thinking in terms of “mounting” and “updating”, you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects.
– this function useeffect() function happen with all render
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
}
This will work for only update with list usestate
useEffect(() => {
document.title = `You clicked ${count} times`;
},[list]);
// this will run when the component mounts and anytime the stateful data changes
React.useEffect(() => {
alert('Hey, Nads here!');
});
// this will run, when the component is first initialized
React.useEffect(() => {
alert('Hey, Nads here!');
}, []);
// this will run only when count state changes
React.useEffect(() => {
fetch('nads').then(() => setLoaded(true));
}, [count]);
// this will run when the component is destroyed or before the component is removed from UI.
React.useEffect(() => {
alert('Hey, Nads here');
return () => alert('Goodbye Component');
});
As a JavaScript web developer, asynchronous code gives you the ability to run some parts of your code while other parts are still waiting for data or resolving
