Rendering
43 bites tagged Rendering — interview questions with model answers, and 60-second explainers.
Fabric UI update lifecycle vs old architecture
Render builds an immutable C++ shadow tree, commit diffs trees and runs Yoga layout, mount applies mutations to native views; JSI shares the tree, enabling synchronous and concurrent rendering unlike the… the Fabric render pipeline.
How Fabric Improves Rendering Over the Old UIManager
A C++ shadow tree shared across threads, JSI-based synchronous access, immutable tree commits, and support for concurrent React features. Fabric rendering model.
How StyleSheet.create reduces styling overhead
StyleSheet styles are created once with stable references, so identical renders skip reallocation and reduce diffing and serialization work; inline literals allocate new objects each render… depth on style identity and serialization.
Why Text inherits styles but View does not
Nested Text inherits text styles because it maps to platform attributed-text rendering, while Views are independent layout boxes with no style cascade. rationale behind text inheritance.
Inline styles vs StyleSheet.create
Styles are JS objects passed to the style prop; StyleSheet.create registers styles once for stable references and validation, while inline objects recreate on each render. styling fundamentals and object identity.
Fabric Native Components
Fabric Native Components are host platform views exposed to React under the New Architecture. They use JSI and a C++ rendering core so the shadow tree, layout, and view updates run synchronously without the legacy async bridge, reducing latency and tearing.
Performance concerns with the :has() selector
:has() forces upward and forward style invalidation on DOM changes, broad subjects are costly; mitigate by scoping the subject, avoiding deep or universal arguments, and limiting dynamic… understanding of selector matching cost.
Diagnose dropped frames during animation
Use Core Animation and color-debug options to spot off-screen passes, blending, and overdraw; cache, flatten, and set shadowPath. Profiling rendering with Instruments and fixing GPU hot spots.
Diagnosing and fixing CustomPainter jank
Avoid work in paint, gate repaints with shouldRepaint, isolate with RepaintBoundary, cache static layers. optimizing custom canvas rendering. blaming the device or repainting everything every frame.
What is SSR and what are its advantages over a client-side SPA?
This tests server-client rendering trade-offs. A strong answer defines SSR as server HTML generation plus client hydration, citing faster time-to-content, better SEO for async data, and unified component logic.
What is the Virtual DOM's role during a Vue state update?
Tests your grasp of Vue's reactive render pipeline. A strong answer: state change triggers a new virtual DOM tree; runtime diffs it against the old tree to apply only necessary real DOM updates. Red flag: saying virtual DOM updates browser DOM directly.
Optimize a canvas with thousands of moving objects
Tests GPU-bound vs CPU-bound bottleneck diagnosis. Strong answers: batch draw calls to cut JS-to-GPU overhead, and render to a smaller back buffer to reduce fill-rate cost.
Describe an ideal ISR scenario and configure it in a Server Component
This tests stale-while-revalidate tradeoffs. A strong answer picks a semi-static scenario like a product catalog, then covers the fetch revalidate option or segment-level config. A red flag is confusing ISR with SSR or adding useEffect to a Server Component.
React Reconciliation: The Virtual DOM Diff
React diffs a lightweight in-memory tree against the next render to apply only surgical changes to the real DOM. It fires on every state or prop change. Missing keys in lists force React to rebuild more nodes than needed, destroying performance.
Lists and Keys in React
React turns arrays into UI with map, yet each child needs a unique key prop or you get console warnings. Filter first, then map. The footgun: forgetting keys or failing to include stable unique IDs in your source data.
React DevTools Profiler: Find Slow Renders
The Profiler is a stopwatch for your component tree. It records why each render happened and how long it took, so you can spot unnecessary re-renders in React Native. The footgun is chasing render counts instead of actual frame time.
Custom Rendering with draw(_:)
draw(_:) is the callback where UIKit asks your view for pixels. Override it to render custom shapes or text with Core Graphics when stock views fall short. The footgun is calling it directly or doing non-drawing work inside; use setNeedsDisplay() instead.
When would you implement a CustomPainter and how does shouldRepaint work?
Use CustomPainter for charts; check fields in shouldRepaint to skip frames; pass Listenable to bypass build layout. Knowledge of Flutter render pipeline repaint optimization.
Walk me through Flutter's rendering pipeline and its phases.
Tests your understanding of the three-tree separation and how changes become pixels. Outline: setState marks objects dirty; Build updates elements, Layout computes sizes bottom-up via constraints, and Paint records commands top-down into layers.
Flutter's Widget, Element, and RenderObject trees: roles and relationships
Tests your mental model of Flutter's rendering layers. Strong answer: Widget is immutable configuration; Element is the mutable lifecycle manager owning the RenderObject; RenderObject is the concrete layout and paint entity.
In a CustomPainter, what is the purpose of the shouldRepaint method?
This tests Flutter repaint optimization. Answer: shouldRepaint compares old and new delegates, returning true only when visual properties differ so the framework skips paint calls. A red flag is returning true unconditionally, forcing useless repaints.
Describe CustomPaint and CustomPainter and implement a circle
This tests Flutter's render delegation. Separate CustomPaint, the canvas widget, from CustomPainter, the drawing logic; cover canvas.drawCircle and shouldRepaint returning false. Red flags: calling setState in paint or ignoring shouldRepaint.
Relationship between Widget, Element, and RenderObject trees and their benefits
Widget configures, Element owns state, RenderObject paints; Element.update reuses the RenderObject, so rebuilds stay cheap. Your understanding of Flutter's three-tree separation of concerns.
CSS will-change: purpose, appropriate use, and overuse consequences
Tests whether you know will-change is a last-resort hint, not a default. Strong answers: hint imminent changes, toggle via script, and warn that overuse wastes memory. Red flag: leaving it in CSS permanently or applying it preemptively to many elements.
Get Rendering bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.