Fragments code - React

login.js

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

export default function App() {
    const [usuario, setUsuario] = useState(null)
    const [loadingUser, setLoadingUser] = setState(true) // User is updating?
    
    useEffect(() => {
        async function loadUser() {
            if(!getToken()) {
                setLoadingUser(false)
                return;
            }
            
            try {
                const { data: usuario } = await Axios.get('/api/usuarios/whoami') // Search for user active
                setUsuario(usuario)
                setLoadingUser(false)
            } catch (err) {
                console.error(err)
            }
        }
        loadUser()
    }, [])
    
    async function login(email, password) {
        const { data } = await Axios.post('/api/usuarios/login', {
            email, password
        })
        setUsuario(data.usuario)
        setToken(data.token)
    }
    async function signup(usuario) {
        const { data } = await Axios.post('/api/usuarios/login', {usuario})
        setUsuario(data.usuario)
        setToken(data.token)
    }
    
    function logout {
        setUsuario(null)
        deleteToken()
    }
    
    return (
        <div className = 'Container'>
            <Nav />
            {/* <Signup signup = {signup} /> */}
            <Login login = {login} />
            <div> { JSON.stringify(usuario) } </div>
        </div>
    )
}

// auth-helpers.js
import Axios from 'axios'

const TOKEN_KEY = 'CLONTAGRAM_TOKEN'

export function setToken(token) {
    localStorage.setItem(TOKEN_KEY, token)
}

export function getToken(token) {
    localStorage.getItem(TOKEN_KEY)
}

export function deleteToken(token) {
    localStorage.removeItem(TOKEN_KEY)
}

export function initAxiosInterceptors() {
    Axios.inteceptors.request.use(function(config){
        const token = getToken()
        if (token) {
            config.headers.Authorization = `bearer ${token}`
        }
        return config
    })
}

Upload_File.js

const [state, setState] = useState()

handleFile(event) {
    let file = event.target.files[0]
    this.setState({file : file})
}

handleUpload(event) {
    let file = this.state.file
    let formData = new FormData()
    formData.append('image', file) // image | video
    formData.append('name', 'nameFile')
    
    axios({
        url: 'base_url/path',
        method: 'POST',
        headers: {
            authorization: 'auth_token'
        },
        data: formData
    }).then((res) => {
        // TODO: Successfully process here
    }.(err) => {
        // TODO: Failure process here
    })
}

useEffect.js

// useEffect: Se llama useEffect porque se hará un efecto secundario. Queremos que React haga algo distinto de mostrar HTML
// Nos permite crear un puente entre React y el navegador
export default function App() {
    const [cuenta, setCuenta] = useState(0)
    
    useEffect(() => {
//         useEffect se ejecuta después de que haga render el componente
        console.log(`La cuenta es ${cuenta}`)
//         Si se agrega un event listener se debe remover
    }, []) // Refresca 1 vez
    
    return (
        <>
            <h1>La cuenta es: {cuenta}</h1>
            <button onClick={() => setCuenta(cuenta + 1)}>Aumentar</Button>
        </>
    )
}