Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
How would you create a styled Button accepting a variant prop
It tests prop interpolation for dynamic styling in CSS-in-JS. Good answers use styled.button with a function reading props.variant to map CSS rules in one component. A red flag is splitting into separate components per variant or using inline styles.
Pass server-fetched data from Server Components to nested Client Components
Tests RSC boundary awareness. Strong answer: fetch in the async Server Component, pass serializable props to nested Client Components. Red flag: proposing Context or useEffect inside the Server Component.
Describe combining useContext and useReducer for scalable feature state
This tests replacing prop drilling with a context-reducer pattern. A strong answer covers two contexts for state and dispatch, a provider wrapping the subtree, and a pure reducer. A red flag is one global context or async logic inside the reducer.
Use useContext to provide theme state without prop drilling
This tests global state sharing without prop drilling. A strong answer uses createContext and a Provider with useState at the app root, then calls useContext in nested components. Red flag: ignoring re-render costs or placing the Provider too deep.
Explain useReducer and when to prefer it over useState
Tests if you know useReducer centralizes complex state transitions better than scattered useState. Answer: define reducer/dispatch, then contrast with useState via interdependent fields or deep updates. Red flag: calling it only for global state or Redux.
What is a custom hook? Write a simple useToggle example.
What it tests: Whether you see hooks as stateful logic extraction. Outline: Define a use-prefixed function calling hooks; write useToggle with useState and callback; explain extraction vs duplication. Red flag: Helpers without hooks or missing use prefix.
Why is exhaustive-deps critical and when can you disable it?
This tests closure and effect timing intuition. A strong answer explains missing deps let effects read stale render values, gives a concrete override like a ref or stable callback, and warns that silencing the rule hides refactor hazards.
What is the purpose of the useEffect cleanup function?
Explain cleanup prevents memory leaks by clearing timers or unsubscribing when dependencies change or on unmount.
How do you fetch data with useEffect and prevent memory leaks?
This tests useEffect async lifecycle and cleanup. A good answer places fetch inside useEffect, uses an ignore flag or AbortController to block state updates after unmount, and includes deps. A red flag is skipping cleanup and letting a late response set state.
How do you use useState to track user input?
Initialize with useState at top level, bind input value to state, and update via onChange using setter.
Zustand Middleware: Intercept Every Set Call
Zustand middleware intercepts set calls to add logging, persistence, or devtools without touching business logic. Use it when updates need the same side effect, like localStorage sync.
HashRouter: routing without server configuration
HashRouter traps routes after a # the server never sees, letting SPAs run on static hosts like GitHub Pages without rewrite rules. The tradeoff is ugly URLs and SEO blind spots since search engines may ignore whatever follows the hash.
Server vs. Client Components in Next.js
Next.js forces a render boundary. Server Components generate HTML without sending JavaScript, while Client Components ship JS for interactivity. The footgun is importing a heavy library into a Server Component via a child, bloating the client bundle.
Protected Routes: Server Gates, Not Hidden Links
A protected route is a server-enforced gate, not a hidden link. In Next.js, middleware or server components validate sessions before HTML ships, which matters for dashboards and billing.
UI unresponsive during large data processing on main thread
Tests RN's dual-thread model and 16.67ms frame budget. Strong answers separate JS and UI thread roles, blame long JS tasks for dropped frames, and propose chunking data to yield the event loop. Red flag: claiming memoization alone solves thread blocking.
Upload Key vs App Signing Key
Your upload key is a disposable badge for Google Play, not the signature users install. You sign release AABs with it before uploading. Treating it as unlosable or committing it to git are common mistakes.
Native Module Threading Model
Native modules run on their own threads, not the JS thread or main UI thread. Heavy work stays off the JS event loop, but UI mutations must be manually dispatched to the main thread. Assuming they are main-thread safe causes crashes and ANRs.
iOS ViewManager: Native UI Bridge Factory
An iOS ViewManager is a bridge factory, not a view: it creates native UIViews and maps JS props to them. Use it for iOS surfaces like MapKit or camera previews JS cannot render. Never store view state in the manager; one manager vends many views.
Reanimated Layout Animations: Auto-Morphing Views
Reanimated's layout prop auto-animates view bounds between layout passes. Use it when state changes make views shift, expand, or reorder so you avoid manual measurement code. It conflicts with gesture-driven transforms, causing jumps if mixed.
useAnimatedGestureHandler: UI-Thread Gesture Worklets
useAnimatedGestureHandler bridges RNGH events to Reanimated shared values on the UI thread via worklets, keeping pan gestures at 60fps without JS drops. The footgun is reading JS state inside worklet, which crashes because worklets run in an isolated runtime.