Pure functions!

array_multisort(array_map(function($element) {
  return $element['key'];
}, $result), SORT_ASC, $result);

const [isCopySuccess, setIsCopySuccess] = useState<boolean>(false)
const copyTextRef = useRef(null)

   const copyToClipBoard = async () => {
  {  try {
       await navigator.clipboard.writeText(copyTextRef.current.innerHTML)
      setIsCopySuccess(true)
       setTimeout(function() {
         setIsCopySuccess(false)
       }, 2500)
     } catch (err) {
       setIsCopySuccess(false)
     }
  }

react-native start --reset-cache

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

import { useCallback, useRef } from 'react';
export default function useDebounce(callback, delay = 400) {
  const debounce = useRef(null);
  return useCallback(
    (...args) => {
      const context = this;
      clearTimeout(debounce.current);
      debounce.current = setTimeout(() => {
        callback.apply(context, args);
      }, delay);
    },
    [callback, delay],
  );
}

/* 
Usage:

const handleWindowResize = useDebounce(SetWindow)

useEffect(() => {
window.addEventListener('resize', handleResize)
*/

function addList(list) {
  setLists([...lists, list]);
}
function removeList(id) {
  const tempLists = lists.slice();
  const index = tempLists.findIndex(list=> list.id === id);
  tempLists.splice(index, 1);
  setLists(tempLists);
}

    const logout = useCallback(() =>{
        dispatch({type: 'LOGOUT'});
        setUser(null);
        window.location.reload();               //the old version is history.push('/'), this cause a error when user log in, refresh the page, log out, then SIGN IN button doesn't work, I have no idea why it happens 
    },[dispatch]) 
    

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

const { whatsAppTopics, selectedTopics, setSelectedTopics } = useContext(
    WhatsAppConfigContext
  );

  function handleChangeCheckBox(e) {
    const clickedTopic = e.target;
    if (clickedTopic.checked) {
      setSelectedTopics([...selectedTopics, clickedTopic.value]);
    }
    if (!clickedTopic.checked) {
      const updatedSelectedTopics = selectedTopics.filter(
        (selectedTopic) => selectedTopic !== clickedTopic.value
      );

      setSelectedTopics(updatedSelectedTopics);
    }
  }

{
  "name": "frontend",
    // add proxy, so instead of looking at front end server, our api requests look at backend server
    // call it prox, then add the loopback address and the backend server port
  "proxy": "http://127.0.0.1:8080",
  "version": "0.1.0",

<OrangeLink to={{
                  pathname: `/dapps/p2p/my-trades/create-trade/${item?.idAdvert}`,
                  state: { prevPath: '/my-chats',
                  participant: item?.participant?.name}}
                }>
                Create trade
              </OrangeLink>

const Nav = styled.div`
    div > a.active > div {
        color: ${props => props.color}
     }
`
function Header() {
    const {DefaultColor} = useContext(GlobalContext)
    return <Nav color={DefaultColor?.success} />
}

import React, { useState } from "react";
import "./App.css";

const App = () => {
  const [counterA, setCounterA] = useState(0);
  const [counterB, setCounterB] = useState(0);

  return (
    <div>
      <button
        onClick={() => {
          setCounterA(counterA + 1);
        }}
      >
        Increment A
      </button>
      <button
        onClick={() => {
          setCounterB(counterB + 1);
        }}
      >
        Increment B
      </button>
      <div>counterA: {counterA}</div>
      <div>counterB: {counterB}</div>
    </div>
  );
};

export default App;