SShortSingh.
Back to feed

Developer Refactors Habit Tracker Streak Logic Into a Single Reusable React Hook

0
·9 views

A developer rebuilt the core streak-tracking logic of a habit tracker app into a single custom React hook called useStreak, sharing the approach on DEV Community. The hook handles common edge cases such as timezone differences and configurable daily reset times, using a resetHour parameter to accommodate users like night-shift workers whose days don't end at midnight. Wrapping the logic in a hook rather than a plain utility function improves composability, allowing it to be layered with other hooks like useNotificationSchedule or useMilestone without duplicating calculations across components. The isolated structure also makes the logic easier to unit-test independently of any UI. The developer also flagged a design consideration: displaying 'longest streak' alongside 'current streak' can help prevent users from feeling that one missed day erases all their progress.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Log in to join the discussion and vote.

Log in

Related stories

0
ProgrammingDEV Community ·

Developer Tests OpenCV SFace Model for Face Recognition via Nearest Neighbor Search

A developer tested OpenCV Zoo's SFace model to evaluate whether face embeddings can reliably identify the same person across different images using nearest neighbor search. SFace converts a 112x112 face crop into a 128-dimensional numerical vector, and the experiment checked whether images of the same person cluster closer together than images of different people. Two datasets were used for comparison: the Olivetti Faces dataset with 400 grayscale images across 40 people, and a subset of the Labeled Faces in the Wild dataset with 400 color images under more real-world conditions. The test measured cosine similarity between same-person and different-person embedding pairs, and also compared results between small grayscale crops and aligned color face crops. The full experiment code is publicly available on GitHub and can be run locally using the mise and uv tools, requiring approximately 500 MB of free disk space.

0
ProgrammingDEV Community ·

SvelteKit Remote Functions: Using query.batch and query.live for Efficient Data Fetching

A Thai-language developer tutorial published on DEV Community explores advanced SvelteKit remote function techniques in Part 2 of an ongoing series. The article focuses on two key methods: query.batch(), which groups multiple simultaneous data requests into a single server call to solve the N+1 query problem, and query.live(), which enables real-time streaming data updates. The query.batch() method works by collecting individual client-side calls made within the same microtask, bundling their parameters into a single array, and sending one consolidated request to the server. On the server side, the function receives the full array of inputs, performs a single database query using constructs like ANY(), and returns a lookup function to map results back to each original request. This approach significantly reduces unnecessary database load compared to firing separate requests for each data item.

0
ProgrammingDEV Community ·

DEV Weekend Challenge: Build a Passion-Themed Project for a Share of $1,000

DEV Community has launched its latest Weekend Challenge, inviting developers to build a project inspired by the theme of passion, with submissions open from July 10 to July 13, 2026 at 6:59 AM UTC. The challenge is designed to be completable over a weekend, giving participants across all time zones most of their Saturday and Sunday to participate. A total of five winners will each receive $200, a DEV++ membership, and an exclusive badge, with one overall winner and four category-specific winners recognized. Prize categories reward the best use of Snowflake, Solana, ElevenLabs, or Google AI, though using these tools is optional for the overall winner slot. Participants must publish a post on DEV using the official submission template and the #weekendchallenge tag, with entries judged on theme relevance, creativity, technical execution, and writing quality.

0
ProgrammingDEV Community ·

Developer's 'Deploy to Cloudflare' button shipped auth bypass to all users by default

A developer discovered that his open-source invoicing app Minvoice was deploying with admin authentication fully disabled for all users who used its one-click Cloudflare deploy button. The root cause was the app's .dev.vars.example file, which contained a DEV_BYPASS_ACCESS=true flag meant only for local development to skip repetitive login prompts. Cloudflare's deploy button reads that file and pre-fills its values as suggested defaults, meaning most users accepted them without changes, inadvertently pushing the auth bypass flag into production. Beyond the security flaw, the same mechanism also deployed a localhost URL into payment links and placeholder API keys, causing payment buttons to silently fail. The developer has since restructured the example file so only a required admin password field is active, with all other entries commented out to prevent template values from becoming live production configuration.