Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
JSX: Putting HTML Inside Your JavaScript Components
JSX is a syntax extension that lets you write HTML-like markup directly inside your JavaScript files, keeping UI logic and structure together. It's the standard way to define a React component's output. The footgun is that JSX is stricter than HTML.
useSyncExternalStore: For Synchronous External State
useSyncExternalStore lets React safely read from external data sources without UI tearing. It's for integrating non-React state, like from Redux or browser APIs, ensuring consistent reads during concurrent rendering.
useAnimatedStyle: Link Shared Values to Component Styles
The useAnimatedStyle hook connects a shared value to a component's style, running animations on the UI thread. It's a reactive StyleSheet for dynamic properties like opacity or transform. The footgun: never mutate shared values inside the hook.
useSharedValue: State for High-Performance Animations
The useSharedValue hook creates state that lives on the UI thread, bypassing React's render cycle for animations. Use it with useAnimatedStyle to drive smooth, 60fps animations. The footgun: modifying a shared value won't re-render your component.
JSI Host Objects: Exposing C++ to JavaScript
A JSI Host Object is a C++ object exposed directly to your JavaScript runtime, bypassing React Native's slow, serializing bridge. It's used in high-performance native modules like database adapters.
withTiming: Animate Values Over a Set Duration
withTiming is your CSS transition for React Native animations. You define a target value, a duration, and an easing curve to create predictable, time-based animations like fades or size changes.
Animated: Drive Styles with Values, Not Setters
React Native's Animated API lets you drive styles with a value, not manual setters. Use it for performant fades and slides. The biggest footgun is forgetting useNativeDriver: true, which keeps animations smooth by running them off the JS thread.
SafeAreaView: Avoid Notches and Status Bars (Deprecated)
SafeAreaView was a component that automatically padded your UI to avoid device notches and system bars. It was a simple way to keep content visible on iOS, but it is now deprecated. The modern approach is to use the react-native-safe-area-context library.
FormData: The Right Way to Upload Files
FormData is your digital envelope for file uploads. It packages files and text into a multipart/form-data payload for fetch. Use it in React Native to upload images or videos. The footgun: don't set the Content-Type header yourself; fetch handles it.
TanStack Query: Manage Server State, Not Client State
TanStack Query treats server data as a cache, not local state. It automates fetching, caching, and background updates to keep your React Native app in sync with your backend.
Immer: Write Mutable Code for Immutable State
Immer lets you write simple, mutable-style code to produce an immutable next state. It's essential in Redux or with React's useState to avoid complex spread operators for deep updates. The footgun: mutations are only safe inside Immer's produce function.
Props Drilling: Passing Data Through Components
Props drilling is passing data through components that don't need it, just to get it to a deeply nested child. It's React's most direct way to share state down the component tree. The footgun: this couples intermediate components to data they never use.
The Gesture Responder System: Who Gets the Touch?
The Gesture Responder System is React Native's negotiation protocol that decides which component owns a touch. It's how the framework distinguishes a button tap from a scroll. The main footgun is that the deepest component wins the touch by default.
Platform Governance: Enabling Scale Without Chaos
Platform governance provides guardrails for internal tools, letting teams build safely and quickly. It's crucial when a platform's growth creates security risks or duplicated effort. The footgun is reactive governance—only making rules after an incident.
PESTLE Analysis: Mapping Your Business's External World
PESTLE analysis is a strategic checklist for scanning the external world for threats and opportunities you can't control but must react to. It's used for market entry strategy and product development.
Jest: A Batteries-Included JavaScript Test Framework
Jest is a 'batteries-included' JavaScript test framework, bundling a runner, assertions, and mocks for a zero-config experience. It's a go-to for testing Node, React, and TypeScript apps. Footgun: Snapshot tests only catch unexpected changes, not flawed logic.
Custom Error Classes: Beyond Generic Errors
Create specific error types, like NotFoundError, instead of generic ones. This lets your code react differently to different failures, like sending a 404 for a missing user vs. a 500 for a database outage.
Node.js Events and the EventEmitter
Node.js handles concurrency with an event-driven model, not threads. "Emitters" fire named events that "listeners" react to, enabling non-blocking I/O for things like file reads and web requests.
Loss Aversion: Why Losing $10 Hurts More Than Gaining $10
Loss aversion is the bias where losing something feels twice as bad as gaining the same thing feels good. It drives user behavior in free trials and pricing. Don't confuse this emotional reaction to framing with rational risk aversion.
NavigatorObserver: Listening to Route Changes in Flutter
A NavigatorObserver acts like a flight traffic controller for your app's screens, letting you react to navigation events like push and pop. It's used for analytics or updating UI based on the current route.