function Student() { this.obj = {}; this.setName = function(name) { this.obj.name = name; return this; }; this.setAge = function(age) { this.obj.age = age; return this; }; this.get = function() { console.log(this.obj); }; } let student1 = new Student(); student1 .setName('pravin') .setAge(25) .get()
Day: June 11, 2021
A tricky useEffect dependency
The following code returns 1. It is tricky but should be eye opener.
export default function App() { const [state, setState] = useState(''); useEffect(()=>{ console.log(1) },[setState]) return ( <div> <h1>Hello StackBlitz!</h1> <p>Start editing to see some magic happen :)</p> </div> ); }
which is same as
export default function App() { const [state, setState] = useState(''); useEffect(()=>{ console.log(1) },[]) return ( <div> <h1>Hello StackBlitz!</h1> <p>Start editing to see some magic happen :)</p> </div> ); }
The following will throw an error
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
export default function App() { const [state, setState] = useState(''); setState(1); useEffect(()=>{ console.log(1) },[]) return ( <div> <h1>Hello StackBlitz!</h1> <p>Start editing to see some magic happen :)</p> </div> ); }
We need to set state inside event handler function.
export default function App() { const [state, setState] = useState(0); const onClickHandler=()=>{ setState(1); } useEffect(()=>{ console.log(state) },[state]) return ( <div> <h1>Hello StackBlitz!</h1> <button onClick={onClickHandler}>click</button> </div> );