React rendering behaviour

React render the jsx code as it reads it using virtual dom.

It provides different kind of behaviour using react hooks which help in building in fast, reliable and scalable application.

Walkthrough of this behaviour:

Your react app started and provided you with a usable screen.
Now in the code a state is created using useState and we change that state then we will get a affect on a particular part of the code (or jsx element) where the state is used.

So, as per my observation we can directly use javascript code in our screen to show the data as per our convience. The react will not through any error. It will run all loops and logics as defined.

If we introduce a state inside our code. Then change the particular state will only affect that part of screen where the state is used. And it always will as per react behaviour.

Using useEffect will re render the entire screen.

If we try to change any normal variable (not state variable) then there will be no changes inside the screen. As react will not notice any change in the dom.