kristijan-pajtasev

npx create-next-app PROJECT_NAME - use-npm - example https://github.com/vercel/next-learn-starter/tree/master/learn-starter

kristijan-pajtasev

[
  {
    "id": 1,
    "text": "todo 1",
    "isCompleted": false
  },
  {
    "id": 2,
    "text": "todo 2",
    "isCompleted": false

kristijan-pajtasev

import UserContext from "../UserContext";
import {useContext} from "react";

function ContextChild() {
    const user = useContext(UserContext);
    return (
        <div>
            <div>context child</div>
            <pre>
                {JSON.stringify(user)}

kristijan-pajtasev

import UserContext from '../UserContext'
import ContextChild from "../ContextChild";

function ContextParent() {
    const value = {name: "Peter"};

    return (
        <UserContext.Provider value={value}>
            <div>context parent</div>
            <ContextChild/>

kristijan-pajtasev

// UserContext.js
import {createContext} from "react";

const user = {};

export default createContext(user);

kristijan-pajtasev

import {useEffect} from 'react';
function OneRun() {
    useEffect(() => {
        console.log("Runs only once.")
    }, []);
    return <div>One run</div>
}

kristijan-pajtasev

import {useEffect, useState} from "react";
import Counter from "./Counter";
function ConditionalEffects() {
    const [firstCounter, setFirstCounter] = useState(0);
    const [secondCounter, setSecondCounter] = useState(0);
    useEffect(() => {
        console.log("updated first counter")
    }, [firstCounter]);
    useEffect(() => {
        console.log("updated first counter")

kristijan-pajtasev

import {useEffect, useState} from "react";
import Counter from "./Counter";

function ConditionalEffects() {
    const [firstCounter, setFirstCounter] = useState(0);
    const [secondCounter, setSecondCounter] = useState(0);
    useEffect(() => {
        console.log("updated first counter")
    }, [firstCounter]);
    return (

kristijan-pajtasev

import {useEffect} from 'react';
import ChatAPI from './ChatAPI';

function ChatComponent() {
    useEffect(() => {
     ChatAPI.subscribe();
     return () => {
         ChatAPI.unsubscribe();
     }
    })

kristijan-pajtasev

import {useEffect, useState} from 'react';
 
 function Counter() {
 const [counter, setCounter] = useState(0);
 
 useEffect(() => {
  console.log("This useEffect runs on every change");
 })
 
 return (