React run javascript code after all render is completed in function based component

Question

I had a form component 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 component 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 components but couldn't find for function based components like the one I am using.

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

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

shivamragnar · Accepted Answer · 2021-02-19 09:29:21Z

5

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
 }, [])

}

answered Feb 19, 2021 at 9:29

shivamragnar

4343 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abraham · Accepted Answer · 2021-12-26 15:54:10Z

1

Similar to what the components are writing, previously one would use functions likecomponentDidUpdate & componentDidMount to manipulate components after/before being rendered. Funcitonal components 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 component.

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

edited Dec 26, 2021 at 15:54

Abraham

16.3k12 gold badges91 silver badges124 bronze badges

answered Feb 19, 2021 at 9:29

berlin

5364 silver badges15 bronze badges

Collectives™ on Stack Overflow

React run javascript code after all render is completed in function based component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related