state 관련 질문

일반 변수 대신 state를 사용하는 이유가 변수로 사용하게 되면 변수 참조값 변경시, html을 재 렌더링 해줘야하지만
 state는 변수 변경시 자동으로 재 렌더링 해주기 때문으로 이해하고 있습니다.

그렇다면 변수 값이 업데이트 되고 재랜더링을 의도적으로 진행하면 문제가 없을까요?

또한 state 변경함수 작동원리가 state를 변경하고, 변경이 확인되면 index.html을 재 랜더링 해주는 방식이라고 예상했는데,
state 변경함수 사용시, 그 전에 직접 변경한 변수 정보(예를들어, onClick 코드 내에서 state 변경 이전에 더 윗줄에 쓰여있는 변수 변경에 대한 정보)는 
업데이트 되지 않고 렌더링이 돼서 의아했습니다. 

자바스크립트가 비동기 io를 기반으로 한다고 해도 이후 onClick을 하게 돼도 해당 정보가 업데이트가 되기는 해야할것 같은데 직접적인 변수 변경에 대한 것은 
렌더링시 반영이 안됐습니다.

state 변경함수가 어떤 원리로 재렌더링을 해주는 것인지 궁금합니다.
또한 이경우, 왜 기존에 변경한 다른 변수에 대한 정보는 반영이 안되는지 궁금합니다.