How to code like Senior Engineers!?

Summary

In this informative video, Ysh Gupta discusses top coding practices to enhance readability and modularity in code. He demonstrates techniques such as breaking down JSX into functional components, simplifying state management with fewer Boolean flags, organizing imports for better maintainability, and grouping related props. These practices aim to improve code quality, making it more intuitive for developers to understand and work with, ultimately leading to a more efficient and effective development process.

Takeaways

• 📝 Modularize code by creating methods or functional components to handle different parts of JSX, improving readability and maintainability.
• 🔍 Use conditional rendering within components to handle different states like loading, error, and empty states, enhancing the user experience.
• 🧩 Encourage the use of functional components over functions that return JSX for better structure and readability in React applications.
• 🔄 Simplify state management by using a single state variable with multiple states (idle, loading, finished, error) instead of multiple boolean flags.
• 📚 Organize imports in a categorized manner for better readability and maintainability, which helps new developers to quickly understand the codebase.
• 🛠 Group related props into a single namespace or object to reduce the number of individual props passed to components, making the code cleaner and easier to manage.
• 🔑 Use named functions for useEffect hooks to make the purpose of the effect clearer and improve code readability for developers.
• 🔍 Destructure props within components to make the code cleaner, but consider using a grouped object for related props to avoid prop sprawl.
• 📈 Advocate for code practices that leave the codebase in a better state than it was found, benefiting future developers and teammates.
• 🔄 Create common components for repeated elements like 'empty state' to avoid duplication and centralize modifications.
• 📝 Comment and reach out for feedback on coding practices to foster a community of continuous improvement and shared knowledge.

Q & A

What is the main topic of the video by Ysh Gupta?

The main topic of the video is top coding practices that the presenter has learned over his career, ranging from simple and intuitive to more complex.

Why are PR reviews important according to the video?

PR reviews are important because they enhance the overall code standard and the practices adopted in a team, leading to better code quality.

What is the first coding practice discussed in the video?

The first coding practice discussed is making code more readable and modular by abstracting JSX into separate methods or functional components.

How does the video suggest improving conditional rendering in a component?

The video suggests improving conditional rendering by creating methods that conditionally return JSX based on the presence of data, such as guides or questions.

What is the alternative to creating methods that return JSX as suggested in the video?

The alternative suggested is to create functional components instead of methods that return JSX, which increases readability and modularity.

How does the video recommend simplifying state management in a component?

The video recommends using a simplified state management approach by defining a state variable with different states like idle, loading, finished, or error, instead of multiple boolean flags.

What is the benefit of using a single 'options' prop instead of multiple related props?

Using a single 'options' prop makes the code easier to manage, reason with, and decreases the number of props being passed around, improving readability.

Why should imports be categorized in a code file?

Categorizing imports makes the code more readable and manageable, allowing developers to quickly identify the types of imports and follow a consistent standard.

What is the purpose of naming functions or callbacks explicitly in a use effect?

Naming functions or callbacks explicitly in a use effect makes the code more readable, allowing others to quickly understand the purpose of each code block and its place in the component lifecycle.

How can creating a common 'emptyState' component benefit a codebase?

Creating a common 'emptyState' component can be reused in multiple places, improving code reusability and consistency, and making the codebase more readable.

What is the presenter's suggestion for viewers who want to share their coding practices or seek guidance?

The presenter suggests that viewers can share their practices in the comments, reach out through social media, or book a session with him for career mentoring or guidance through the provided links.