How to calculate element heights?
Unanswered
British Shorthair posted this in #help-forum
British ShorthairOP
Hi, I've got a server-side rendered component in which I'm dynamically creating Client Components (JSX.Elements). This client components will have different sizes and I need them to be calculated/getted in the ssr component, since from there I'm also controlling other components.
Could you please help me, how I can get the height? useState, useRef and hooks all seem to be deactivated on server side components :(
I would be very happy if somebody could help me with it, thanks in advance! 🥹
Could you please help me, how I can get the height? useState, useRef and hooks all seem to be deactivated on server side components :(
- MyServerComponent.tsx
- MyClientComponent.tsx
- ClientComponentDependingOnTheOthersHeight.tsxI would be very happy if somebody could help me with it, thanks in advance! 🥹
9 Replies
Serbian Hound
What is the need for the parent to be a Server component? If the parent is a client component you have no problem, but I'm guessing there is some requirement?
@Serbian Hound What is the need for the parent to be a Server component? If the parent is a client component you have no problem, but I'm guessing there is some requirement?
Morelet’s Crocodile
Do you think we should send height value to the server?
So that server can return the correct rendered page?
So that server can return the correct rendered page?
Serbian Hound
sounds like the parent component should just be a client component instead
@Serbian Hound What is the need for the parent to be a Server component? If the parent is a client component you have no problem, but I'm guessing there is some requirement?
British ShorthairOP
mhh, if I'm thinking about it again, there is no need for it to be a server component 🥲
I guess I will try it with a client component then
I guess I will try it with a client component then
British ShorthairOP
https://gist.github.com/unordentlich/e7f37bb5262a1d8b9ca6fda8c0a66b35
Well, I've got another problem.
I'm struggling with the usage of the caught numbers from the client component since they get submitted at useEffect but I'm using them before in the parent component ig.
Hard to explain but I'm talking about lines 17-31 in
Do you have an idea how I can use the
Well, I've got another problem.
I'm struggling with the usage of the caught numbers from the client component since they get submitted at useEffect but I'm using them before in the parent component ig.
Hard to explain but I'm talking about lines 17-31 in
PostOverview.tsx and lines 19-21 in InlinePost.tsxDo you have an idea how I can use the
arrowCalculator for the insertion of the <ReplyArrow>s? Their submitted arrowCalculator value is always 30 since they probably get rendered before the page gets loaded (and thus useEffect gets triggered) :/Serbian Hound
it's quite hard to understand fully what you want to do, but can't you just have an array of these elements in a
ref, then sum the height of all these elements to achieve what you want?@Serbian Hound it's quite hard to understand fully what you want to do, but can't you just have an array of these elements in a `ref`, then sum the height of all these elements to achieve what you want?
British ShorthairOP
So you would put the references of the InlinePost elements into an array? Or what do you mean? 🙈
British ShorthairOP
Hi, I've got it working now!! 🥹
However, there is a huge visible delay from the calculation of the elements height to their visualization due to the use of useEffect. Do you've got an idea how I can fasten this up or otherwise hide the whole arrow until the useEffect calc stuff is done? :)
However, there is a huge visible delay from the calculation of the elements height to their visualization due to the use of useEffect. Do you've got an idea how I can fasten this up or otherwise hide the whole arrow until the useEffect calc stuff is done? :)
Layout shift score 🥲