React Hooks ~ Quick Practice

Overview

Reading and practicing React 16 hooks (useState and useEffect)

• Introducing Hooks from reactjs.org
• Code Sample in codesandbox.io 

Source Code

/*
  About React Hooks
  Introducing Hooks - https://reactjs.org/docs/hooks-intro.html
  https://reactjs.org/docs/hooks-overview.html
  Using the Effect Hook - https://reactjs.org/docs/hooks-effect.html
*/
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
    // Create a property message stored in the component state
    // and a funtion setMessage to update the value
    const [message, setMessage] = useState("no message!");
    // Create a property previousMessage stored in the component state
    const [previousMessage, setPreviousMessage] = useState(null);
    // Create a property counter stored in the component state
    const [counter, setCounter] = useState(0);

    // Everytime the component update, this function is executed
    // Similar to componentDidMount and componentDidUpdate
    useEffect(() => {
        console.log(`[useEffect] -- GLOBAL -- message:${message}, counter:${counter}`);
    });

    // Everytime the component update because the property message has changed,
    // this function is executed
    useEffect(() => {
        // Only run when message changed
        console.log(`[useEffect] -- message:${message}, counter:${counter}`);

        // We return a function that will be executed before the parent
        // function is executed the next time. This is used for clean up.
        return () => {
            // Run when the component unmount,
            // as well as before re-running the effect due to a subsequent render
            setPreviousMessage(message);
            console.log(`[useEffect Previous] -- message:${message}, counter:${counter}`);
        };
    }, [message]);

    const click = () => {
        setMessage(` msg-${Date.now()}`);
    };

    const onClickCounter = value => {
        setCounter(counter + value);
    };

    return (
        

            
React useState, useEffect
            
Counter: {counter}
            
            
            

            

            
Message: {message}
            
previousMessage: {previousMessage}
            
        
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);