From 4d865395966d6067c62521f266969efc9ead1b2b Mon Sep 17 00:00:00 2001 From: Gajendra Malviya Date: Thu, 8 Oct 2026 13:16:34 +0530 Subject: [PATCH 1/2] fix(home): render the developer count in the server HTML --- src/components/CountUp.jsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/CountUp.jsx b/src/components/CountUp.jsx index ccc045e..fe77095 100644 --- a/src/components/CountUp.jsx +++ b/src/components/CountUp.jsx @@ -6,23 +6,25 @@ import { useEffect, useRef, useState } from 'react' // into view. Eases out (cubic) so the count slows toward the final // number rather than stopping abruptly. // +// The server-rendered HTML (and the first client render) already contains +// the final `value`, so crawlers and tools that do not run JavaScript read +// the real number. The count only restarts from 0 in the browser when the +// element scrolls into view. +// // `format` is called with the current number to render the displayed // string (e.g. add a "+" or commas). Defaults to localized integer. // -// Honors `prefers-reduced-motion` — renders the final number -// immediately with no animation. +// Honors `prefers-reduced-motion` — keeps the final number with no +// animation. export function CountUp({ value, durationMs = 1500, format }) { const ref = useRef(null) - const [n, setN] = useState(0) + const [n, setN] = useState(value) const formatFn = format || ((x) => x.toLocaleString()) useEffect(() => { if (typeof window === 'undefined') return const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches - if (reduce) { - setN(value) - return - } + if (reduce) return const node = ref.current if (!node) return let raf = 0 @@ -42,6 +44,7 @@ export function CountUp({ value, durationMs = 1500, format }) { ([entry]) => { if (entry.isIntersecting && !started) { started = true + setN(0) start(performance.now()) obs.unobserve(node) } From 2a60e5ee74e8a76be0066b0f3267397d7e356482 Mon Sep 17 00:00:00 2001 From: Gajendra Malviya Date: Mon, 12 Oct 2026 14:59:23 +0530 Subject: [PATCH 2/2] fix(home): pin the developer count format to en-US to avoid hydration mismatch --- src/components/CompanyTrustedList.jsx | 2 +- src/components/CountUp.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CompanyTrustedList.jsx b/src/components/CompanyTrustedList.jsx index 092e86c..7249098 100644 --- a/src/components/CompanyTrustedList.jsx +++ b/src/components/CompanyTrustedList.jsx @@ -31,7 +31,7 @@ export default function CompanyList() { `${n.toLocaleString()}+`} + format={(n) => `${n.toLocaleString('en-US')}+`} />{' '} Developers at Companies Like: diff --git a/src/components/CountUp.jsx b/src/components/CountUp.jsx index fe77095..6dabbaf 100644 --- a/src/components/CountUp.jsx +++ b/src/components/CountUp.jsx @@ -19,7 +19,7 @@ import { useEffect, useRef, useState } from 'react' export function CountUp({ value, durationMs = 1500, format }) { const ref = useRef(null) const [n, setN] = useState(value) - const formatFn = format || ((x) => x.toLocaleString()) + const formatFn = format || ((x) => x.toLocaleString('en-US')) useEffect(() => { if (typeof window === 'undefined') return