Home
Basics
Introduction Setting up environment First Component JSX Component lifecycle Class Based Components Function Based Components Props State Hooks useState hook useEffect hook Events Server requests CSS in React Router third party JavaScriptAdvanced
useContext hook useRef hook useReducer hook Memo useCallback hook Custom Hooks React and ReduxMiscellaneous
React Third Party Components Html templates in React React Interview QnAuseEffect hook in react
useEffect hook can be used to implement below lifecycle methods of component.- componentDidMount() - use useEffect and pass empty array as second argument
- componentDidUpdate() -
const mounted = useRef(); useEffect(() => { if (!mounted.current) { // componentDidMount code mounted.current = true; } else { //componentDidUpdate code goes here } });
- shouldComponentUpdate() - pass dependency array as second argument or call setState conditionally
- componentWillUnmount() - return a function from useEffect
Adding and removing event listeners
useEffect(() => {
window.addEvenListner('resize','f1')
return ()=>{
window.removeEvenListner('resize','f1')
}
})
Fetching data
fetch(`https://jsonplaceholder.typicode.com/posts`)
.then(response => response.json())
.then(json => console.log(json))
Web development and Automation testing
solutions delivered!!