Tillitsdone
down Scroll to discover

Avoiding Prop Drilling in React Development

Learn effective techniques to prevent prop drilling in React applications.

Explore solutions like Component Composition, Context API, and Custom Hooks to write cleaner, more maintainable code.
thumbnail

Avoiding Prop Drilling in React: Techniques and Solutions

Abstract digital network nodes connected by glowing paths representing data flow through components vibrant violet and red energy streams against deep space background ultra-realistic cinematic 8K high resolution sharp and detailed

Ever found yourself passing props through multiple components just to reach a deeply nested child? That’s prop drilling, and it’s a common pain point in React development. Let’s explore effective strategies to keep your code clean and maintainable.

Understanding Prop Drilling

Prop drilling occurs when props are passed through components that don’t need them, acting merely as intermediaries. This creates tight coupling and makes code harder to maintain.

// Example of prop drilling
const App = () => {
const [user, setUser] = useState({ name: 'John' });
return (
<Header user={user}>
<Navigation user={user}>
<UserProfile user={user} />
</Navigation>
</Header>
);
};

Geometric abstract composition of interconnected crystalline structures in warm colors floating in space representing component hierarchy high-quality ultra-realistic cinematic 8K sharp and detailed

Solution 1: Component Composition

Instead of drilling props, compose components to maintain cleaner data flow:

const App = () => {
const userProfile = <UserProfile user={user} />;
return (
<Header>
<Navigation>
{userProfile}
</Navigation>
</Header>
);
};

Solution 2: Context API

React’s Context API is perfect for sharing values across many components:

const UserContext = createContext();
const UserProvider = ({ children }) => {
const [user, setUser] = useState({ name: 'John' });
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
};

Modern minimalist architecture with flowing curves and interconnected pathways vivid sunset colors reflecting off glass surfaces representing organized structure high-quality ultra-realistic cinematic 8K UHD

Solution 3: Custom Hooks

Extract shared logic into custom hooks for better reusability:

const useUser = () => {
const { user, setUser } = useContext(UserContext);
const updateUserName = (newName) => {
setUser(prev => ({ ...prev, name: newName }));
};
return { user, updateUserName };
};

Best Practices to Remember

  1. Use composition when possible - it’s the simplest solution
  2. Context API for truly global state
  3. Consider state management libraries for complex applications
  4. Keep components focused and single-responsibility

Cosmic nebula with flowing energy streams in bright violet and red hues representing seamless data flow ultra-realistic cinematic 8K high resolution sharp and detailed

icons/logo-tid.svg Latest Blogs
Discover our top articles, selected to support the growth of your business.
https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F09%2FTill-its-done_SEO_R36_Sep_1440x697.jpg@webp Material-UI (MUI) คืออะไร อยากสร้าง UI สวยงามและเป็นมืออาชีพในเวลาอันรวดเร็วใช่ไหม มาทำความรู้จักกับ Material-UI (MUI) ที่ช่วยให้คุณพัฒนาแอปพลิเคชันบน React ได้ง่ายและดูดีในทุกอุปกรณ์ https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F09%2FTill-its-done_SEO_R35_Sep_1440x697.jpg@webp มือใหม่อยากเริ่มเขียนแอป ต้องใช้โปรแกรมและภาษาอะไรบ้าง? อยากเป็นนักพัฒนาแอปแต่ไม่รู้จะเริ่มยังไง พบกับแนวทางการเลือกเครื่องมือและภาษาเบื้องต้นพร้อมคำแนะ เพื่อก้าวสู่เส้นทางการเขียนแอปอย่างมั่นใจในบทความนี้ https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F09%2FTill-its-done_SEO_R34_Sep_1440x697.jpg@webp Website Development Process: เว็บไซต์เปิดตัวแล้ว! แล้วต้องทำอะไรต่อ? พร้อมหรือยังที่จะก้าวสู่ความสำเร็จในโลกออนไลน์ มาเรียนรู้ขั้นตอนและเคล็ดลับดูแลเว็บไซต์หลังเปิดตัว เพื่อสร้างความมั่นคงและเติบโตอย่างยั่งยืนแก่ธุรกิจกันเถอะ พร้อมหรือยังที่จะก้าวสู่ความสำเร็จในโลกออนไลน์ มาเรียนรู้ขั้นตอนและเคล็ดลับดูแลเว็บไซต์หลังเปิดตัว เพื่อสร้างความมั่นคงและเติบโตอย่างยั่งยืนแก่ธุรกิจกันเถอะ https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F09%2FTill-its-done_SEO_R27_Sep_1440x697.jpg@webp เปรียบเทียบ 3 วิธีติดตั้ง install node js บน Ubuntu: NVM vs NodeSource vs Official Repo แบบไหนดีที่สุด? เรียนรู้วิธีติดตั้ง Node.js บน Ubuntu ด้วย NVM, NodeSource หรือ Official Repo เลือกวิธีที่เหมาะกับความต้องการของคุณ พร้อมเปรียบเทียบ เพื่อการพัฒนาที่มีประสิทธิภาพ! https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F09%2FTill-its-done_SEO_R26_Sep_1440x697.jpg@webp Next js image การ Optimization รูปภาพแบบ Native ที่มีประสิทธิภาพสูง เรียนรู้วิธีใช้ Next.js Image เพื่อ Optimization การแสดงภาพบนเว็บไซต์ ด้วยเทคนิคบีบอัด ปรับขนาด Lazy Load และรองรับ Responsive ช่วยให้เว็บคุณโหลดเร็วขึ้นแน่นอน! https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F08%2FTill-its-done_SEO_R22_June_1440x697.jpg@webp Flutter Developer คืออะไร? สำคัญแค่ไหน Flutter Developer คือผู้เชี่ยวชาญด้านการพัฒนาแอปมือถือด้วย Flutter ที่ช่วยสนับสนุนธุรกิจให้เติบโตอย่างรวดเร็วและคุ้มค่า ด้วยเทคโนโลยีที่ยืดหยุ่นและประหยัดต้นทุน
icons/logo-tid.svg

พูดคุยกับซีอีโอ

พร้อมที่จะสร้างเว็บ/แอปของคุณให้มีชีวิตชีวาหรือเสริมทีมของคุณด้วยนักพัฒนาชาวไทยผู้เชี่ยวชาญหรือไม่?
ติดต่อเราวันนี้เพื่อหารือเกี่ยวกับความต้องการของคุณ แล้วมาสร้างโซลูชันที่ปรับแต่งเพื่อบรรลุเป้าหมายของคุณกัน เรายินดีช่วยเหลือทุกขั้นตอน!
🖐️ Contact us
down Explore our best articles, cover a wide variety of technologies
Our knowledge base
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
FacebookInstagramLinkedIn
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.