Calculare height React

Salut. Am o problema careia nu reusesc sa-i dau de cap.

Vreau sa calculez height-ul headerului, doar ca in momentul in care intru pe incognito, la primul load primesc valori haotice.

Am incercat asa:

Am incercat si cu document.querySelector('.header').offsetHeight

Am cautat si pe google, dar nu ma ajuta ce am gasit (adica varianta cu useRef).

Merci :beers:

ai incercat useLayoutEffect?

de ce folosesti jQuery?

Am incercat acum, dar nu functioneaza

jQuery? Nu folosesc jQuery.

Cel mai probabil ai imagini în header care se încarcă după inițializarea JS-ului.

Don’t do this, ma dor ochii.
Foloseste un resize observer si un useState.

react-hook/packages/resize-observer at master · jaredLunde/react-hook (github.com)

  React.useLayoutEffect(() => {
    setSize(target.current.getBoundingClientRect())
  }, [target])

Pune ref in dependinte la useEffect, la prima incarcare probabil nu ai height.

2 Likes

Nu am imagini in header.

Ciudat este ca primesc acele valori DOAR in momentul in care fac primu load pe incognito, dupa refresh ia valorile ok.

Iti lipseste headerRef din dependecy array ul useEffect. Cel mai probabil dupa ce faci refresh iti trage informatiile din cache si are din prima access la DOM.

Recomand sa adaugi un linters si sa te asiguri ca ai react-hooks/exhaustive-deps enabled pentru a evita chestii de genul pe viitor.

Pentru resize event recomand addEventListener. Nu uita sa distrugi listenerul in functia de return a lui useEffect

1 Like

Salut!

Am facut cum ai spus, dar nu functioneaza nici asa.

Am activat linterul, dar nu imi afiseaza erori daca las gol array-ul de la useEffect.

Salut.

Am incercat, dar nu pricep de ce nu functioneaza. Am copiat codul din documentatie si primesc undefined la refresh

Merci

1 Like

Hooks FAQ – React (reactjs.org) - Raspunsul tau e aici

Loading… - CodeSandbox - Exemplu

Am uitat ca ref nu merge in useEffect, trebuie folosit useCallback. Totusi eu n-am folosit niciodata varianta asta, recomand resize observer-ul.

Ai adaugat react-hook/resize-observer in package.json ? (adica npm i @react-hook/resize-observer)

1 Like

Incearca sa faci

if(!headerRef && !headerRef.current) return;

si dupa aduga function headerHeight()

Imi face return direct, pentru ca headerRef.current este undefined la primul load.

Da :smiley:

image

Acum am vazut video-ul.

Deci de la useState iei size-ul si il pui intr-un useLayoutEffect la dependinte, in useLayoutEffect pui un if(size) { …} daca vrei sa il integrezi in codul vechi. Daca n-ai width/height setat s-ar putea sa fie undefined, se rezolva cu if.

Folosesti Next.js? pentru ca atunci se schimba problema. nu ai window
Da, acum vad. Asta e problema, nu ai window.

Da, Next.js folosesc. Teoretic Window ar trebui sa existe in useEffect, corect? Ca d-aia incercam in useEffect

@SSebastian

1 Like

Am adaptat functia sa imi ia height-ul headerului

Dar la fel… nu inteleg din ce cauza are alt height la primul load

Mentionez ca asta se intampla doar cand rulez build & start. Cand sunt pe dev este totul ok :-?

Ce font folosesti ? Eu vad ca se schimba font-ul la prima incarcare.

Banuiala mea tot de css se leaga, dar am incercat si cu listener de window on load (care teoretic face trigger cand tot dom-ul + resursele sunt incarcate).

Rubik, google fonts. Ideea e ca imi da mereu 160 height… nici daca las sans-serif pe 50px nu am height-ul ala.