Contact Me





    OR REACH ME ON

    Performance Tuning in High-Traffic Rails & React Apps

    By 2024, I was working on apps that had moved beyond small MVPs. Some of them were getting thousands of daily users, and the old ways of coding weren’t enough. I had to dive deep into performance tuning — both on the backend (Rails) and frontend (React).

    Here’s what I learned from real high-traffic scenarios.

    Rails Performance Tuning

    1.

    Fixing N+1 Queries

    				
					# Bad 
@users = User.all 
@users.each do |u| 
  puts u.posts.count 
end

# Good 
@users = User.includes(:posts)
@users.each do |u| 
  puts u.posts.size 
end

    Result → Queries dropped from 100+ to 2.

    2.

    Caching 

    				
					Controller 
@posts = Rails.cache.fetch("recent_posts", expires_in: 10.minutes) do 
  Post.order(created_at: :desc).limit(20).to_a 
end

    Result → Reduced DB hits by 80%.

    3.

    Background Jobs

    Heavy tasks (emails, API calls, reports) → moved to Sidekiq + Redis.

    4.

    Database Indexes 

    				
					add_index :users, :email, unique: true

    Result →  Queries that took 200ms dropped to <10ms.

    React Performance Tuning

    1.

    Avoid Unnecessary Renders 

    				
					// Use React.memo 
const TodoItem = React.memo(({ todo }) => {  
  return <li>{todo.text}</li> ;
});

    2.

    Code Splitting

    2.

    				
					const Dashboard = React.lazy(() => import("./Dashboard"));​

    Load large components only when needed.

    3.

    Virtualized Lists

    				
					import { FixedSizeList } from "react-window";
<FixedSizeList height={400} itemCount={10000} itemSize={35} width={300}>
  {({ index, style }) => <div style={style}>Row {index}</div>}
</FixedSizeList>

    Instead of rendering thousands of rows →  use libraries like react-window:

    Real Example:

    One project’s page load time dropped from 4.5s →  1.2s by:

    • Fixing N+1 queries
    • Adding caching
    • Splitting React bundles
    • Lazy loading dashboards

    Lessons Learned

    1. Measure before fixing → Tools like rack-mini-profiler, NewRelic, and Chrome DevTools were critical.

    2. Backend bottlenecks affect frontend → If APIs are slow, React can’t save you.

    3. Performance is never “done” → It’s an ongoing process.

    🎯 Final Thoughts

    Performance tuning isn’t about fancy tricks — it’s about finding the bottlenecks and removing them systematically.

    By early 2024, I realized: scalable apps aren’t built just by good architecture. They’re built by continuously measuring, tuning, and improving performance.