Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
Global vs. Component CSS in React/Next.js
Treat CSS like any other module. Import global styles (like resets or Tailwind) once in your app's entry point. For component-specific styles, import a CSS Module file directly into your component to keep styles scoped and prevent conflicts.
Typing React Component Props with TypeScript
Use TypeScript to define a 'contract' for your component's props with an interface or type. This catches bugs by ensuring data passed to a component has the correct shape. The footgun: files with JSX must use the .tsx extension.
React's Controlled vs. Uncontrolled Components
A controlled component is a form input whose value is driven by React state; an uncontrolled component lets the DOM manage its own state. Use controlled for instant validation or conditional logic.
React's Stale Closure Problem in Hooks
A useEffect closure captures props and state from its render. If the effect doesn't re-run, its functions can operate on old, "stale" data. This surfaces in timers or socket listeners. The footgun is omitting dependencies, which causes these subtle bugs.
useMemo: Cache Expensive Calculations in React
The useMemo hook caches a function's return value, preventing slow calculations from running on every render. Use it to skip heavy data filtering unless its inputs change. The main footgun is a missing dependency, which leads to stale, cached data.
React's useCallback: Cache Functions, Not Just Values
useCallback gives you the same function instance across re-renders, as long as its dependencies are stable. This is key for optimizing child components with React.memo or preventing useEffect from re-running.
React's Rule: Favor Composition Over Inheritance
Instead of extending a base component, build complex UIs by wrapping and configuring smaller ones. Use this for generic containers like dialogs or for creating specialized versions of a component.
React Refs: Memory Without Re-renders
A React ref is like a secret pocket for your component to remember information without triggering re-renders. Use it to hold values not needed for rendering, like a timer ID. The footgun: changing a ref's value won't update the UI; use state for that.
Thinking in React: Decomposing UIs into Components
Think of UIs not as one big page, but as a tree of reusable components. Start by breaking a design mockup into a hierarchy of pieces. The footgun is creating 'god components' that do too much; each component should have a single responsibility.
useEffect: Syncing React with the Outside World
useEffect synchronizes your component with systems outside React's control, acting as a bridge to the browser or network. It's for data fetching or subscriptions.
React Events: Pass, Don't Call
React handles user actions with event handler functions passed as props, like onClick={handleClick}. This is how you make buttons or forms interactive. The key mistake is calling the function (onClick={doIt()}), which runs on render, not on click.
React Fragments: Group Elements Without a Wrapper
React Fragments let you group multiple elements without adding an extra <div> to the DOM. Use them when a component needs to return adjacent elements, like table cells (<td>).
React Props: Arguments for Your Components
Think of props as arguments for your UI components, letting you pass data from a parent down to a child. You use them to customize a component's appearance or behavior, like passing a user object to a ProfileCard.
React Components: Your UI Building Blocks
Think of React Components as custom, reusable HTML tags you create with JavaScript functions. Use them to build everything from buttons to page layouts, speeding up development.
Appium: Test Your React Native App Like a Real User
Appium tests your app like a real user, tapping and scrolling on actual devices to catch bugs your unit tests miss. It's for verifying full user flows across iOS and Android. The footgun: relying only on unit tests gives a false sense of security.
React Native's Bridgeless Mode
Bridgeless Mode replaces React Native's legacy message queue with direct calls between JavaScript and native code. This improves performance by removing the serialization bottleneck for UI rendering and native module calls.
React Native's New Architecture Interop Layer
The Interop Layer is a compatibility bridge, letting legacy native modules run in React Native's New Architecture without a full rewrite. Library maintainers must ensure compatibility for users on RN 0.74+. The footgun: remove partial Codegen specs.
React Native Codegen: Bridging JS and Native
React Native's Codegen auto-generates the boilerplate 'glue code' connecting your JavaScript specs to native implementations. It's essential for building Turbo Modules and Fabric Components.
Android ViewManager: Bridging Native UI to React Native
A ViewManager is a factory for native Android UI. It tells React Native how to create and update a native view from JavaScript, bridging the gap between JS and native platform widgets. It's used for custom or third-party UI.
React Native: Sending Events from Native to JavaScript
Think of it as a webhook from native code to your JavaScript UI. Native modules can push updates to JS without being called, enabling reactive UIs for long-running tasks or platform-level events.