react useEffect
import React, { useEffect } from 'react'; export const App: React.FC = () => { useEffect(() => { }, [/*Here can enter some value to call again the content inside useEffect*/]) return ( <div>Use Effect!&lt;/div> ); }
react useEffect
import React, { useEffect } from 'react'; export const App: React.FC = () => { useEffect(() => { }, [/*Here can enter some value to call again the content inside useEffect*/]) return ( <div>Use Effect!&lt;/div> ); }
state with react functions
class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } }
react useEffect
import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; function LifecycleDemo() { // It takes a function useEffect(() => { // This gets called after every render, by default // (the first one, and every one after that) console.log('render!'); // If you want to implement componentWillUnmount, // return a function from here, and React will call // it prior to unmounting. return () => console.log('unmounting...'); }, [ // dependencies to watch = leave blank to run once or you will get a stack overflow ]); return "I'm a lifecycle demo"; } function App() { // Set up a piece of state, just so that we have // a way to trigger a re-render. const [random, setRandom] = useState(Math.random()); // Set up another piece of state to keep track of // whether the LifecycleDemo is shown or hidden const [mounted, setMounted] = useState(true); // This function will change the random number, // and trigger a re-render (in the console, // you'll see a "render!" from LifecycleDemo) const reRender = () => setRandom(Math.random()); // This function will unmount and re-mount the // LifecycleDemo, so you can see its cleanup function // being called. const toggle = () => setMounted(!mounted); return ( <> <button onClick={reRender}>Re-render</button> <button onClick={toggle}>Show/Hide LifecycleDemo</button> {mounted && <LifecycleDemo/>} </> ); } ReactDOM.render(<App/>, document.querySelector('#root'));
hooks in react
import React, { useState, useEffect } from "react"; export default props => { console.log("componentWillMount"); console.log("componentWillReceiveProps", props); const [x, setX] = useState(0); const [y, setY] = useState(0); const [moveCount, setMoveCount] = useState(0); const [cross, setCross] = useState(0); const mouseMoveHandler = event => { setX(event.clientX); setY(event.clientY); }; useEffect(() => { console.log("componentDidMount"); document.addEventListener("mousemove", mouseMoveHandler); return () => { console.log("componentWillUnmount"); document.removeEventListener("mousemove", mouseMoveHandler); }; }, []); // empty-array means don't watch for any updates useEffect( () => { // if (componentDidUpdate & (x or y changed)) setMoveCount(moveCount + 1); }, [x, y] ); useEffect(() => { // if componentDidUpdate or componentDidMount if (x === y) { setCross(x); } }); return ( <div> <p style={{ color: props.color }}> Your mouse is at {x}, {y} position. </p> <p>Your mouse has moved {moveCount} times</p> <p> X and Y positions were last equal at {cross}, {cross} </p> </div> ); };
use state
var fruitStateVariable = useState('banana'); // Returns a pair var fruit = fruitStateVariable[0]; // First item in a pair var setFruit = fruitStateVariable[1]; // Second item in a pair
how to use hooks react
const App = () => { const [students , setStudents] = useState([]); return ( // put in the jsx code here ) }
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us