Calling function directly in functional component body in React.js

Question

I have a functional component and some function is called directly in the body (that function changes the state && it's needed to be run each render). Is it 100% okay, or could it cause bugs?

const myFunc = (setMyState, ...) => {
    ...
    setMyState(...)
}

const MyComponent = () => {
    const [myState, setMyState] = useState(...)
    myFunc(setMyState, ...)
    return(<div>some content...</div>)
}

Please see How do I ask a good question? I also recommend Jon Skeet's Writing the Perfect Question and Question Checklist. — T.J. Crowder
– T.J. Crowder, Commented Jan 20, 2022 at 10:04

Tasos · Accepted Answer · 2022-01-20 10:05:46Z

2

This will cause an infinite loop. This is why:

component renders first time
function updates component state
component renders because of state update
function runs again and updates component again
etc

You can definitely avoid this by using if-statements inside the function, but the best way to update a component state is either by user input/api calls or props updating(your case I suppose)

The best way to do that in my opinion is using the useEffect hook

answered Jan 20, 2022 at 10:05

Tasos

2,06515 silver badges19 bronze badges

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

3 Comments

Tasos Over a year ago

"You can definitely avoid this by using if-statements inside the function". I agree that the question needs more details, but in general this is an anti-pattern

Tasos Over a year ago

You call this function that has setState as an argument a hook? Really? This function as said by OP is used to update component state.. and yes it is an anti-pattern to pass setState to functions outside of React's scope

T.J. Crowder Over a year ago

(I don't get notification you replied if you don't @ ping me.) I somehow managed to miss the part of the question where they said it set state. o_O My bad!! :-)

Collectives™ on Stack Overflow

Calling function directly in functional component body in React.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related