UseEffect - Exercises
The article discusses the use of the useEffect hook in React for managing component behavior. It provides examples of how to render components based on different conditions, such as when the component mounts or when state changes. Additionally, it highlights the behavior of useEffect in development mode versus production mode.
- ▪The useEffect hook can be used to run side effects in functional components.
- ▪Different examples illustrate how to control when effects run based on component state.
- ▪The article notes that in development mode, React intentionally mounts and unmounts components to detect side effects.
Opening excerpt (first ~120 words) tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3795010) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Sivakumar Mathiyalagan Posted on May 22 UseEffect - Exercises #beginners #javascript #react #tutorial Render only once using UseEffect import { useEffect, useState } from "react"; function Input(){ const[name,setName] = useState('') useEffect(()=>console.log("Component Mounted"),[]); return( <> <input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input> <p>Hi! Welcome {name}</p> </> ) } export default Input Enter fullscreen mode Exit fullscreen mode Output:…
Excerpt limited to ~120 words for fair-use compliance. The full article is at DEV.to (Top).
Discussion
0 commentsMore from DEV.to (Top)
