Discover 100 plus powerful possibilities with React Hooks. Visit www.reactuse.com for complete documentation with MCP Model Context Protocol support or install via npm install @reactuse/core to boost efficiency in your React development with a wide collection of hooks
Preface When your side effects have a twin
Have you ever made a single API call and seen two identical requests in the network panel During development your counter designed to increment only once starts counting from 2 Welcome to the double execution mechanism of React 18 in Strict Mode
Strict Mode React's extra check
Strict Mode acts as a checker that runs effects to detect impure effects early This helps write more robust components but in real scenarios we often need certain operations to run only once per application or per function reference Common examples sending analytics initializing third-party libraries registering global events and logging user behavior
The problem appears when useEffect with an empty dependency array runs twice in strict mode and causes duplicates in actions that should be unique
Traditional solutions and their drawbacks
Solution 1 using useRef A common pattern is to use useRef to mark that the effect has already run but this generates a lot of repetitive code and must be replicated in every component where unique execution is required
Solution 2 global flag Another option is to use a global variable to avoid re-executions This pollutes the global scope and causes interference between component instances similar to roommates sharing the same refrigerator
Why not wrap useRef in a custom hook The useRef approach seems natural but introduces ambiguities with dependency changes and complexity in managing when to reset the hasRun marker These issues complicate semantics and memory management
Elegant solution creating createOnceEffect
A cleaner alternative is to register effect function references using WeakSet The idea is simple Register the function reference when it runs for the first time and block subsequent executions for the same function reference This avoids global pollution and allows automatic garbage collection when the reference no longer exists
Conceptual implementation WeakSet record new WeakSet createOnceEffect hook returns a hook that takes effect and deps inside it creates onceWrapper that checks shouldStart=!record.has(effect) if shouldStart then record.add(effect) and return effect() then it calls the hook with a function that returns onceWrapper() and the corresponding deps This pattern allows creating useOnceEffect from useEffect and useOnceLayoutEffect from useLayoutEffect
Why WeakSet main advantages
Global uniqueness based on function reference the same function runs only once regardless of component instance Automatic garbage collection without memory leaks Clear semantics the same effect reference runs only once Zero extra configuration no need to worry about comparing dependency arrays Better performance O1 operations for lookup and addition
How it works in practice think of each effect function as having an ID when it tries to run a second time the WeakSet doorman detects it was already registered and prevents execution
Practical use conceptual example replace useEffect with useOnceEffect to send initial page analytics initialize third-party SDKs or register global listeners Cleanup still works normally when the component unmounts
Extension for useLayoutEffect when you need to run operations synchronously before DOM updates but only once createOnceEffect applied to useLayoutEffect provides that guarantee
Limitations and best practices
Dependency arrays remain important even for single executions You should choose useOnceEffect only for scenarios that truly require a single global execution Returned cleanup functions run with the normal flow when components unmount
Ready-to-use solution If you prefer not to implement it ReactUse already offers useOnceEffect in its library check reactuse effect useOnceEffect or install npm install @reactuse/core and use import useOnceEffect from @reactuse/core
Conclusions Strict Mode's double execution aims to improve code by detecting impure effects but can cause duplicate behaviors in tasks that must run only once The WeakSet and createOnceEffect approach provides an elegant clear and efficient solution that keeps code readable and avoids unnecessary boilerplate
About Q2BSTUDIO
Q2BSTUDIO is a software development company offering custom applications and technological solutions specialized in artificial intelligence cybersecurity and cloud services aws and azure We offer business intelligence services power bi implementation and AI solutions for companies including AI agents and custom automation Our experience spans custom software custom applications cloud integrations and cybersecurity strategies to protect data and services We manage artificial intelligence projects for companies creating custom AI agents that improve processes and user experience
Featured services from Q2BSTUDIO
Custom software development and custom applications Consulting and deployment on cloud services aws and azure Artificial intelligence projects and business intelligence services Power bi implementation for advanced analytics and visualization Development and integration of AI agents Cybersecurity solutions and audits to meet regulatory requirements
Keywords to improve positioning custom applications custom software artificial intelligence cybersecurity cloud services aws and azure business intelligence services AI for companies AI agents power bi
If you need help implementing solid patterns in React like avoiding double execution of useEffect or want to develop a custom application with artificial intelligence and security capabilities contact Q2BSTUDIO we can accompany you from conception to delivery including deployment on cloud services aws and azure power bi integration and creation of AI agents for companies
Trying this approach will allow you to reduce duplications improve code clarity and leverage elegant JavaScript solutions for practical problems When you encounter Strict Mode's twin remember there are clean and maintainable ways to manage it
