window.location.hash działa w nieoczekiwany sposób

Cześć,

Jest kod (na razie przeczytajcie pierwsze dwie linie):

handleHintsVisibility(event){
    this.setState({isHintsVisible:!this.state.isHintsVisible});
    if (this.state.isHintsVisible){window.location.hash='Hints'};
    /*el = document.getElementById('Hints');
    var rect = el.getBoundingClientRect();
    window.scrollTo(rect.x, rect.y)*/

}

który do dzisiaj miał zadanie realizowane przez drugą linię, to jest ustawiał stan decydujący o wyświetlaniu/niewyświetlaniu komponentu Hints. Praktycznie wyświetlanie/niewyświetlanie realizowane jest tak, że w elemencie Hints return z rendera(zasadniczą cześć rendera pominęłam) działa warunkowo, o tak:

return this.props.isVisible?(
                     <ContainerForHints>
                       {HeaderFor.Hints}
                        {HeaderFor.Avoid}
                        <AvoidOrTry DisciplinesToAvoidOrTry = {DisciplinesToAvoid} color={'hints-worst-color'} />
                        {HeaderFor.Try}
                        <AvoidOrTry DisciplinesToAvoidOrTry = {DisciplinesToTry} color={'hints-best-color'} />
                    </ContainerForHints>
                  
):null

w elemencie ContainerForHints jest etykieta Hints.

Dzisiaj chciałam zrobić tak, żeby po wyświetleniu Hints ekran ustawiał się na nim (gdyż element, który jest zazwyczaj przed nimi jest teraz bardzo długi i właściwie nie widać efektu wywołania Hints. I tu zaczęły sie schody, bo dopisałam linijkę 3 (pierwotnie bez instrukcji warunkowej) a efekt jest taki, że i owszem ekran przesuwa się ale nie wtedy kiedy bym chciała tzn. co drugie wywołanie Hints - czyli wtedy kiedy je wygaszam - czyli efekt wizualny jest taki, że przy co drugim kliknięciu w Hints ekran pokazuje koniec poprzedzającego elementu, za którym nic już nie ma !!!.
Podejrzewam, że coś tu się nie odświeża między ustawieniem stanu a wywołaniem następnej linii. Czy jest jakiś prosty sposób na zmodyfikowanie kodu, aby działał zgodnie z oczekiwaniami? Kolejne linie to inne podejście, niestety nie działające w ogóle dlatego wolałabym pociągnąć dotychczasowe.

Temat rozwiązany,choć było to bardziej pracochłonne niż myślałam.

handleHintsVisibility(event){
    if (!this.state.isHintsVisible){this.setState({focus:'Hints'})}
    this.setState({isHintsVisible:!this.state.isHintsVisible});
}

wprowadziłam nowy element do state - focus- który przechowuje identyfikator ostatnio włączonego komponentu, a jest ustawiany kiedy kliknięcie otwiera a nie zamyka komponent.
Tenże state.focus jest przekazywany do każdego komponentu, a w każdym komponencie jest kod mniej więcej taki

componentDidMount() {if (this.props.focus=='Hints') {window.location.hash ='Hints'}};

Pewnie można to prościej, ale póki co zostanie tak.