Answers for "react hooks example"

react hook example

// Hooks let you build stateful and dynamic components

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

usestate hook

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

react custom hooks

import React, { useState } from "react";
 
// custom hooks useForm
const useForm = callback => {
  const [values, setValues] = useState({});
  return {
    values,
    onChange: e => {
      setValues({
        ...values,
        [e.target.name]: e.target.value
      });
    },
    onSubmit: e => {
      e.preventDefault();
      callback();
    }
  };
};
 
// app component
export default function App() {
  const { values, onChange, onSubmit } = useForm(() => {
    console.log(values.username);
    console.log(values.email);
  });
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input type="text" name="username" onChange={onChange} />
        <input type="email" name="email" onChange={onChange} />
        <input type="submit" value="Sing-in" />
      </form>
    </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 hooks demo

// Same basic function as in reactjs site, with a bit of improvement

import React, { useState, useEffect } from 'react';

export default function Homepage() {
  // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `You clicked ${count} times`;  
    })

  return (
    <div>
      <h2>You clicked {count} times!</h2>

      <button onClick={() => setCount(count > 0 ? count - 1 : count)}> Decrement </button>
      <button onClick={() => setCount(count + 1)}> Increment </button>
    </div>
  );
}

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>
  );
};