Premium
JAVASCRIPT Snippets.

Persist React State with `useLocalStorage` Custom Hook

A reusable React hook to store and retrieve state from browser's localStorage, maintaining data across page refreshes for user preferences or forms.

Adapt UI with `useMediaQuery` for Responsive React Components

Create a custom React hook to detect CSS media query matches, enabling dynamic component rendering or styling based on screen size or device capabilities.

Accurately Measure DOM Layout with `useLayoutEffect`

Learn to use `useLayoutEffect` in React for synchronous DOM updates and measurements, crucial for preventing visual glitches when layout changes depend on computations.

Improve Responsiveness with `useTransition` for Non-Urgent React Updates

Leverage React 18's `useTransition` hook to mark state updates as non-urgent, keeping the UI responsive during long-running data-intensive operations.

Implement Complex State Logic with useReducer Hook

Learn how to manage complex state transitions and logic in React components using the useReducer hook, a powerful alternative to useState for intricate states.

Optimize React Performance with useCallback Hook

Discover how to prevent unnecessary re-renders in child components by memoizing callback functions with the React useCallback hook for performance optimization.

Interact with DOM or Mutable Values using useRef Hook

Learn to directly access DOM elements or persist mutable values across renders without causing re-renders using the React useRef hook, ideal for interactions.

Detect Clicks Outside a Component with useClickOutside Hook

Create a custom React hook, useClickOutside, to easily detect clicks that occur outside a specified DOM element, perfect for closing modals and dropdowns.

Track Previous State or Props with usePrevious Hook

Implement a custom React hook, usePrevious, to store and access the previous value of any state or prop, useful for comparing current and past data in components.

Secure Cookie Handling in Express.js

Learn how to secure session cookies in Express.js applications by properly configuring HttpOnly, Secure, and SameSite flags to mitigate common web vulnerabilities like XSS and CSRF.

Prevent SQL Injection with Prepared Statements (Node.js/PostgreSQL)

Discover how to protect your Node.js application from SQL injection attacks by using parameterized queries with the 'pg' library for PostgreSQL, ensuring secure database interactions.

Configure CORS Safely for Specific Origins in Express.js

Implement secure Cross-Origin Resource Sharing (CORS) in your Express.js API by whitelisting trusted origins, preventing unauthorized cross-domain requests and enhancing application security.