andregardi

const UserContext = React.createContext();

const App = () => {
  const username = "John Doe";
  const otherData = {};
  return (
    <UserContext.Provider value={{ username, otherData }}>
      <Header />
    </UserContext.Provider>
  );

andregardi

// With empty array
useEffect(() => {
  console.log('I will run only once');
}, []);

andregardi

// Without the second parameter
useEffect(() => {
  console.log('I will run after every render');
});

// With the second parameter
useEffect(() => {
  console.log('I will run only when valueA changes');
}, [valueA]);

andregardi

import React from 'react';
import useGlobalHook from 'use-global-hook';
 
const initialState = {
  counter: 0,
};
 
const actions = {
  addToCounter: (store, amount) => {
    const newCounterValue = store.state.counter + amount;

andregardi

function setState(newState) {
  this.state = { ...this.state, ...newState };
  this.listeners.forEach((listener) => {
    listener(this.state);
  });
}

function useCustom(React) {
  const newListener = React.useState()[1];
  React.useEffect(() => {

andregardi

import React from 'react';
import useGlobalHook from './useGlobalHook';

const initialState = { counter: 0 };

const useGlobal = useGlobalHook(React, initialState);

export default useGlobal;

andregardi

function setState(newState) {
  this.state = { ...this.state, ...newState };
  this.listeners.forEach((listener) => {
    listener(this.state);
  });
}

function useCustom(React) {
  const newListener = React.useState()[1];
  React.useEffect(() => {

andregardi

const useCustom = () => {
  const newListener = useState()[1];
  useEffect(() => {
    // Called just after component mount
    listeners.push(newListener);
    return () => {
      // Called just before the component unmount
      listeners = listeners.filter(listener => listener !== newListener);
    };
  }, []);

andregardi

import React from 'react';
import useCustom from './customHook';

const Counter = () => {
  const [globalState, setGlobalState] = useCustom();

  const add1Global = () => {
    const newCounterValue = globalState.counter + 1;
    setGlobalState({ counter: newCounterValue });
  };

andregardi

import { useState, useEffect } from 'react';

let listeners = [];
let state = { counter: 0 };

const setState = (newState) => {
  state = { ...state, ...newState };
  listeners.forEach((listener) => {
    listener(state);
  });