gisderdube

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

function useInterval(callback, delay) {
    const savedCallback = useRef()

    useEffect(() => {
        savedCallback.current = callback
    })

    useEffect(() => {

gisderdube

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

function Counter() {
    const [count, setCount] = useState(0)

    useEffect(() => {
        const interval = setInterval(() => {
            setCount(count + 1)
        }, 1000)

gisderdube

// BAD EXAMPLE
import React, { useEffect, useState } from 'react'

function Counter() {
    const [count, setCount] = useState(0)

    useEffect(() => {
        const interval = setInterval(() => {
            setCount(count + 1)
        }, 1000)

gisderdube

useEffect(
    () => { // 1. effect function
    console.log('effect') 
    document.title = count 

        return () => { // 2. cleanup function
            console.log('cleanup')
        }
    }, 
    [count], // 3. watch-array

gisderdube

import React, { useReducer } from 'react'

function counterReducer(state, action) {
    if (action.type === 'increaseCount') return { ...state, count: state.count + 1 }
    if (action.type === 'toggleColor')
        return { ...state, color: state.color === '#DC0073' ? '#00A1E4' : '#DC0073' }
    return state
}

function Counter() {

gisderdube

import React, { useState } from 'react'

function Counter() {
    const [state, setState] = useState({
        count: 0,
        color: '#DC0073',
    })

    const { color, count } = state

gisderdube

import React, { useState } from 'react'

function Counter() {
    const [count, setCount] = useState(0)
    const [color, setColor] = useState('#DC0073')

    return (
        <div>
            <span style={{ color }}>Current count is: {count}</span>
            <br />

gisderdube

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0)

    return (
        <div>
            Current count is: {count}
            <br />
            <button onClick={() => setCount(count + 1)}>Increase count</button>

gisderdube

import React from 'react'
import styled, { css } from 'styled-components'

const baseStyle = css`
    margin-bottom: ${props => props.noMargin && '0'};
    color: #202020;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-top: 0;
    text-align: ${props => {

gisderdube

import React from 'react'
import styled, { css, keyframes } from 'styled-components'

const animatedCss = css`
    opacity: 1;
    transform: translateY(0);
`

const primaryCss = css`
    background-color: #008bf8;