How to focus an input element on page load?

You need to use useEffect hook to set focus on input field during page load time for functional component.

```jsx harmony
import React, { useEffect, useRef } from "react";

const App = () => {
const inputElRef = useRef(null);

useEffect(() => {
inputElRef.current.focus();
}, []);

return (
<div>
<input defaultValue={"Won't focus"} />
<input ref={inputElRef} defaultValue={"Will focus"} />
</div>
);
};

ReactDOM.render(<App />, document.getElementById("app"));

      <details><summary><b>See Class</b></summary>
      <p>
      You can do it by creating _ref_ for `input` element and using it in `componentDidMount()`:

    

jsx harmony
class App extends React.Component {
componentDidMount() {
this.nameInput.focus();
}

render() {
return (
<div>
<input defaultValue={"Won't focus"} />
<input
ref={(input) => (this.nameInput = input)}
defaultValue={"Will focus"}
/>
</div>
);
}
}

ReactDOM.render(<App />, document.getElementById("app"));

      </p>
      </details>

> **Modern React Note (React 18/19):** `ReactDOM.render` was deprecated in React 18 and removed in React 19. In modern applications, always use `createRoot` from `react-dom/client`:
> 

jsx
> import { createRoot } from 'react-dom/client';
> const root = createRoot(document.getElementById('root'));
> root.render(<App />);
> ```