Maximize Efficiency with React: Avoid Unnecessary Derived State

Maximize Efficiency with React: Avoid Unnecessary Derived StateMaximize Efficiency with React: Avoid Unnecessary Derived State

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Tonye Onuoha

pro

• Apr 7

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁

𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? In React, 𝗱𝗲𝗿𝗶𝘃𝗲𝗱 𝘀𝘁𝗮𝘁𝗲 𝗶𝘀 𝗼𝗳𝘁𝗲𝗻 𝘂𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆.

If a value can be calculated from props or other state, you usually don’t need to store it in "useState". Just compute it during render.

Why this matters:

Avoids state synchronization bugs

Reduces complexity

Keeps components predictable

🔧 𝗥𝘂𝗹𝗲 𝗼𝗳 𝘁𝗵𝘂𝗺𝗯: If you can calculate it, don’t store it.

Less state = fewer bugs.

#FrontendDevelopment #JavaScript #WebDevelopment #FullstackDeveloper

React React Native frontenddeveloper

Nagaraj M

• Apr 8

Thanks for sharing! it is useful

Tonye Onuoha

pro

• Apr 8

You're welcome Nagaraj 😊

Shezaan Ansari

pro

• Apr 5

Type "O-R-B-I-S" to override the system. ⚠️

I hid a secret developer terminal inside this landing page. Can you find it?

Aside from the easter eggs, I've pushed the limits of React Three Fiber and custom shaders for this one.

View the full project on my profile to try it yourself. 🚀

Check it out

Framer React three.js

Vincent Pasili

pro

• Apr 6

Amazing!

Pablito Torrecampo Jr

• Apr 5

Street Safe

Street Safe is a web and Android platform I developed to enable real-time reporting and monitoring of road hazards across Cebu.

I built a Kotlin mobile app for users to submit hazard reports with images and location data, and a React + Tailwind dashboard for authorities to review and respond in real time. The system integrates YOLOv8 via a Flask API to automatically detect and classify hazards from uploaded images, with Firebase handling authentication and real-time data syncing.

Key Results

- Submit hazard reports in under 1 minute

- Real-time updates for faster response and decision-making

- Automated image detection reduces manual work

- Visual mapping of hazards using Leaflet for better prioritization

Tech Stack

React (Vite), Tailwind CSS, Kotlin, Firebase, Flask API, Python, YOLOv8, Leaflet

Consulting Web Design Web Development React Vercel Kotlin

Gennaro Scotto di Clemente

• Apr 6

Very useful and thoughtful platform! Thanks!

Brijesh Kumar

• Apr 6

Built Authify — a full-stack authentication system that goes beyond a basic login form. It handles everything a real production app needs: JWT access and refresh token rotation, email verification, password reset flows, multi-device session tracking, and background email queues using BullMQ and Redis.

The backend is Node.js + Express + TypeScript with PostgreSQL through Prisma. Security wasn't an afterthought — HTTP-only cookies, Argon2 password hashing, rate limiting, and Helmet headers are all in place. The frontend is React + TypeScript with TanStack Query handling server state.

Most auth tutorials show you the happy path. This one handles the edge cases — token expiry, brute-force protection, emails that don't block the request cycle, sessions you can actually revoke per device.

Built it as a reference system I can drop into client projects or extend with OAuth and 2FA. https://authify.brijeshdev.in

Completed work