Full-Stack Development Case Studies & Practical Application 5 — Questions and Answers
Question 1: A React component fetches user data on mount using useEffect with an empty dependency array. The app shows stale data when navigating back to the page. What is the root cause?
- React caches the component between navigations and skips remounting, so useEffect does not re-run (Correct answer)
- The empty dependency array causes the effect to run on every render
- useEffect is not allowed inside functional components
- React Native does not support useEffect
Correct answer: React caches the component between navigations and skips remounting, so useEffect does not re-run
When React reuses a cached component instance, it does not remount it, so the empty-dependency useEffect never fires again.
Question 2: A company's CI/CD pipeline deploys to production on every merge to main. A bad deploy causes downtime. What strategy lets them recover in under 2 minutes?
- Manual rollback by redeploying the previous Git tag
- Blue-green deployment where traffic switches between two identical environments, enabling instant cutover (Correct answer)
- Revert the Git commit and wait for CI to redeploy
- Restore from the most recent database backup
Correct answer: Blue-green deployment where traffic switches between two identical environments, enabling instant cutover
Blue-green deployment keeps the previous environment live, enabling traffic to be rerouted back in seconds without rebuilding.
Question 3: A developer hard-codes a third-party API key in a React component that is pushed to a public GitHub repo. What is the immediate response?
- Make the GitHub repository private
- Revoke and rotate the API key immediately, then remove it from git history using git filter-repo or BFG (Correct answer)
- Delete the commit from the UI
- Add .env to .gitignore going forward
Correct answer: Revoke and rotate the API key immediately, then remove it from git history using git filter-repo or BFG
Bots scan GitHub continuously; once exposed, the key must be considered compromised and revoked, and git history must be cleaned.
Question 4: A full-stack team needs to share TypeScript types between the React frontend and the Express backend to prevent contract mismatches. What is the most maintainable approach?
- Copy-paste types into both projects and update manually
- Create a shared types package in a monorepo that both frontend and backend import (Correct answer)
- Use PropTypes in the frontend and JSDoc in the backend
- Generate backend types from frontend snapshots
Correct answer: Create a shared types package in a monorepo that both frontend and backend import
A shared types package in a monorepo is the single source of truth, ensuring both ends of the API stay in sync automatically.
Question 5: A team ships a new onboarding flow and wants to measure whether it increases user activation without disrupting the existing experience. What is the correct methodology?
- Deploy to all users at midnight when traffic is lowest
- Run an A/B test with random user assignment, track activation rates for each variant, and use statistical significance to decide (Correct answer)
- Ask 5 employees to try the new flow and collect feedback
- Monitor server error rates as a proxy for user satisfaction
Correct answer: Run an A/B test with random user assignment, track activation rates for each variant, and use statistical significance to decide
A proper A/B test with random assignment and statistical significance testing is the only reliable way to attribute activation changes to the new flow.
Question 6: A microservices app has service A calling service B, which calls service C. Service C becomes slow. What pattern prevents this latency from cascading and taking down service A?
- Increase the timeout on service A to 60 seconds
- Implement a circuit breaker on the inter-service calls so failures trip the breaker and return fallback responses (Correct answer)
- Add a load balancer between each service
- Merge all three services into one
Correct answer: Implement a circuit breaker on the inter-service calls so failures trip the breaker and return fallback responses
A circuit breaker stops calling a failing downstream service and returns a fast fallback, preventing thread exhaustion from propagating upstream.
Question 7: A team's production database has no staging replica. A schema migration that drops a column runs successfully in development but must be deployed carefully to production. What is the safest sequence?
- Run the migration on production during off-peak hours without testing
- Deploy code that no longer reads the column first, verify it is stable, then run the migration to drop the column (Correct answer)
- Drop the column first, then deploy the new code
- Back up the database, drop the column, and restore from backup if anything breaks
Correct answer: Deploy code that no longer reads the column first, verify it is stable, then run the migration to drop the column
Removing all code references before dropping the column ensures no running instance will try to read a column that no longer exists.
Full-Stack Development Case Studies & Practical Application 5
A React component fetches user data on mount using useEffect with an empty dependency array.
The app shows stale data when navigating back to the page.
What is the root cause?