I had a form ponent with the following content

function Form() {
    return (
    <div className="form-container">
        <div className="form-control">
            <label id="text-input">Text </label>
            <input type="text"></input>
        </div>
        <div className="form-control">
            <label>Time </label>
            <input type="text"></input>
        </div>
        <div className="form-control" style={{alignItems:"center"}}>
            <button className="add-but">Add</button>
        </div>
    </div>
    )
}

I wanted to focus the text element after the ponent gets rendered.
I was first trying to put {document.querySelector("#txt-in").focus()}, it didn't work and after searching I found I could use the tag autoFocus. and everything would work beautifully.

But I was wondering, what if I want to actually execute javascript code after rendering? or actually do this in javascript? I found answers for class based ponents but couldn't find for function based ponents like the one I am using.

how do I execute code I want executed after the element is rendred, in function based ponents?

I had a form ponent with the following content

function Form() {
    return (
    <div className="form-container">
        <div className="form-control">
            <label id="text-input">Text </label>
            <input type="text"></input>
        </div>
        <div className="form-control">
            <label>Time </label>
            <input type="text"></input>
        </div>
        <div className="form-control" style={{alignItems:"center"}}>
            <button className="add-but">Add</button>
        </div>
    </div>
    )
}

I wanted to focus the text element after the ponent gets rendered.
I was first trying to put {document.querySelector("#txt-in").focus()}, it didn't work and after searching I found I could use the tag autoFocus. and everything would work beautifully.

But I was wondering, what if I want to actually execute javascript code after rendering? or actually do this in javascript? I found answers for class based ponents but couldn't find for function based ponents like the one I am using.

how do I execute code I want executed after the element is rendred, in function based ponents?

• javascript
• reactjs
• frontend
• jsx

• 1 You can do that using useEffect function if you are using react hooks or lifecycle methods from the react class. – kunal panchal Commented Feb 19, 2021 at 9:25
• 1 For this you need a useRef hook reactjs/docs/hooks-reference.html#useref – Konstantin Samarin Commented Feb 19, 2021 at 9:25

2 Answers 2

You can use React Hooks useEffect for your purpose.

Simply put below code

import React, {useEffect} from "react";

function Form() {

 useEffect(() => {
    // Do whatever you want after first render
    // Put your code here
 }, [])

}

Similar to what the ponents are writing, previously one would use functions likeponentDidUpdate & ponentDidMount to manipulate ponents after/before being rendered. Funcitonal ponents realised we could use one 'hook' for this called useEffect where one can trigger a particular action to occur on the basis of a state change to the ponent.

Here is a link to the docs for useEffect - https://reactjs/docs/hooks-effect.html