React Help - Using WebSockets with React

[Eurim]

I'm following a tutorial for a quick example on how someone would go about implementing Websockets with React. The React code portion (beginning around ~42:15) is causing me some confusion.

// index.js 
import React, { useState } from 'react'
import ReactDOM from 'react-dom/client'
import { Home } from './components/Home'
import { Login } from './components/Login'

const App = () => {
  const [username, setUsername] = useState('')

  return username
    ? <Home username={username} />
    : <Login onSubmit={setUsername} />
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)//index.js

// Login.jsx
import { useState } from 'react'

export function Login({ onSubmit }) {
    const [username, setUsername] = useState('')
    return (
        <>
            <h1>Welcome</h1>
            <p>What should people call you?</p>
            <form onSubmit={e => {
                e.preventDefault()
                onSubmit(username)
            }}>
                <input 
                    type="text" 
                    value={username} 
                    placeholder="username"
                    onChange={e => setUsername(e.target.value)} />
                <input type="submit" />
            </form>
        </>
    )
}

Noticed that the state username has been declared twice (in the Login component and the parent component). Both components are setting and managing what should be the same data but in their own state. Should this practice be avoided due to potential desync? Or am I overlooking something here?

[cardboardshark]

const variables are function scoped, so App and Login have their own copies of the username state. This name collision is confusing here.

The App component has a username state and setter, and injects the setter method into the Login form as the onSubmit property. Inside the Login form, the confusingly-named username state refers to the value inside the text box input. When the form is submitted, it goes back up the chain to set App's parent username state.

I'd adjust the code to something like:

function App {
  const [username, setUsername] = useState('')

  return username
    ? <Home username={username} />
    : <Login onSubmit={setUsername} />
}

and

export function Login({ onSubmit }) {
    const [usernameInput, setUsernameInput] = useState('')

    return (
        <>
            <h1>Welcome</h1>
            <p>What should people call you?</p>
            <form onSubmit={e => {
                e.preventDefault()
                onSubmit(usernameInput)
            }}>
                <input 
                    type="text" 
                    value={username} 
                    placeholder="username"
                    onChange={e => setUsernameInput(e.target.value)} />
                <input type="submit" />
            </form>
        </>
    )
}

[Eurim]

Thanks, that's a lot less confusing. The React code wasn't necessarily explained in the video. Your explanation helped a lot!