Part 8 [RBP] Next Steps With React

Follow Florian on various social media platforms like [YouTube](https://www.youtube.com/c/CodinginFlow), [Instagram](https://www.instagram.com/codinginflow/), [TikTok](https://www.tiktok.com/@codinginflow), and [X/Twitter](https://x.com/codinginflow) for more web development content and updates. Mailing list: [CodingInFlow.com/newsletter](http://CodingInFlow.com/newsletter)

Links:

- Florian’s free web development playlist on YouTube: <https://www.youtube.com/playlist?list=PLrnPJCHvNZuDG6BWjUFVxeWyYlve_SVJO>
- Code link: <https://github.com/codinginflow/react-best-practices/branches/stale>

Part 7 [RBP] Use Fragments Instead Of Divs

This lesson focuses on using React Fragments to improve the structure and styling of your components when rendering multiple elements.

- **The Problem with Divs:** Learn how wrapping elements in unnecessary divs for rendering can lead to cluttered DOM structures and styling issues.
- **Introducing Fragments:** Discover how to use Fragments (empty tags `<> </>`) to group elements without adding extra nodes to the DOM, resulting in cleaner and more efficient code.
- **Benefits of Fragments:** Understand how Fragments help maintain proper styling, improve code readability, and optimize your application's performance by reducing unnecessary DOM elements.

Links:

- Florian’s free web development playlist on YouTube: <https://www.youtube.com/playlist?list=PLrnPJCHvNZuDG6BWjUFVxeWyYlve_SVJO>
- Code link: <https://github.com/codinginflow/react-best-practices/blob/fragments/src/app/page.tsx>

Part 6 [RBP] Create Hooks For Your Context Providers

This lesson presents a best practice for working with context providers in React, specifically addressing situations where a meaningful default value isn't available.

- **The Problem with Undefined Context:** Understand the challenges of using context providers without a proper default value, leading to potential silent failures and difficulties in debugging.
- **Custom Hooks for Context Providers:** Learn how to create custom hooks that encapsulate the logic for accessing and validating context values, ensuring that errors are caught early in the development process.
- **Improving Code Reliability and Reusability:** Discover how this approach improves code readability, promotes reusability of context-related logic, and provides more informative error messages, making your React applications more robust.

Links:

- Florian’s free web development playlist on YouTube: <https://www.youtube.com/playlist?list=PLrnPJCHvNZuDG6BWjUFVxeWyYlve_SVJO>
- Code link: <https://github.com/codinginflow/react-best-practices/tree/context-hook/src/app>

Part 5 [RBP] Create Custom Hooks

This lesson explains how to improve the organization and reusability of React components by extracting complex logic, particularly related to data fetching, into custom hooks.

- **Creating Custom Hooks:** Learn the process of creating a custom hook to encapsulate state management and side effects, such as those involved in fetching data and handling loading and error states.
- **Organizing and Reusing Logic:** Understand the benefits of separating concerns by moving complex logic into custom hooks, leading to cleaner and more maintainable components.
- **Improving Code Readability:** Discover how custom hooks can make your code more declarative and easier to understand by abstracting away implementation details and providing a clear interface for interacting with data.

Links:

- Florian’s free web development playlist on YouTube: <https://www.youtube.com/playlist?list=PLrnPJCHvNZuDG6BWjUFVxeWyYlve_SVJO>
- Code link: <https://github.com/codinginflow/react-best-practices/tree/custom-hook/src>

Part 4 [RBP] Clean Up Your Fetch Requests

This lesson focuses on preventing race conditions that can occur when making multiple fetch calls in React components, leading to inconsistent UI behavior and a poor user experience.

- **Identifying Race Conditions:** Understand how race conditions happen when asynchronous fetch requests resolve in an unexpected order, particularly with slow or unreliable network connections.
- **Strategies for Avoiding Race Conditions:** Learn how to use tools like SWR or React Query to manage fetch requests and automatically handle race conditions, or implement manual cleanup logic with an "ignore" flag to discard outdated responses.
- **Improving Code Structure:** Discover how to keep your fetch-related code organized and maintainable, especially when dealing with loading and error states, setting the stage for cleaner solutions covered in the next lesson.

Links:

- Florian’s free web development playlist on YouTube: <https://www.youtube.com/playlist?list=PLrnPJCHvNZuDG6BWjUFVxeWyYlve_SVJO>
- Code link: <https://github.com/codinginflow/react-best-practices/blob/fetch-cleanup/src/app/page.tsx>

Part 3 [RBP] Clean Up Your Effects

This lesson emphasizes the crucial practice of cleaning up side effects in React components to prevent unexpected behavior and optimize performance.

- **Understanding useEffect Cleanup:** Learn how to use the cleanup function returned by `useEffect` to properly handle resources like network connections, event listeners, and subscriptions.
- **Avoiding Memory Leaks and Unexpected Behavior:** Discover how neglecting cleanup can lead to memory leaks, multiple event triggers, and other unintended consequences, especially when components mount and unmount frequently.
- **Debugging with Strict Mode:** Explore how React's Strict Mode helps identify potential issues by intentionally double-invoking effects in development, making it easier to spot missing cleanup logic.

Links:

- Florian’s Next.js with Express and TypeScript Course: <https://codinginflow.com/nextjs>
- Florian’s free web development playlist on YouTube: <https://www.youtube.com/playlist?list=PLrnPJCHvNZuDG6BWjUFVxeWyYlve_SVJO>
- Code link: <https://github.com/codinginflow/react-best-practices/blob/effect-cleanup/src/app/page.tsx>

Part 2 [RBP] Derive State When Possible

This lesson focuses on optimizing React state management for better performance and code organization.

- **Deriving State:** Learn how to calculate and derive state values directly within your component instead of storing redundant data, leading to more efficient and maintainable code.

- **Avoiding Unnecessary Re-renders:** Understand the impact of state changes on component re-renders and discover techniques to minimize them, such as using `useMemo` for expensive calculations.

- **Improving Code Clarity:** Explore how to simplify your state logic and reduce complexity by deriving state and avoiding unnecessary `useEffect` calls.

- Florian’s free web development playlist on YouTube: <https://www.youtube.com/playlist?list=PLrnPJCHvNZuDG6BWjUFVxeWyYlve_SVJO>

- Code link: <https://github.com/codinginflow/react-best-practices/blob/derive-state/src/app/page.tsx>

Part 1 [RBP] Exploring Modern React Frameworks + Setup

This lesson covers setting up a new React project using best practices. It discusses choosing the right framework, emphasizing the benefits of Next.js for its full-stack capabilities and features like routing and image optimization. The lesson also touches on the importance of TypeScript and ESLint for code quality and maintainability, and introduces the App Router as the modern approach to structuring Next.js applications.

- Florian’s free web development playlist on YouTube: <https://www.youtube.com/playlist?list=PLrnPJCHvNZuDG6BWjUFVxeWyYlve_SVJO>
- Code link: <https://github.com/codinginflow/react-best-practices/branches/stale>

Part 0 [RBP] React Best Practices - Course Intro

Florian Walther, from Coding In Flow, shares the common pitfalls and best practices in React development. This course will help developers write cleaner and more robust React code by addressing frequent mistakes. The lesson also highlights additional resources available, including a YouTube channel, newsletter, and a GitHub repository with code examples.

- Florian’s free web development playlist on YouTube: <https://www.youtube.com/playlist?list=PLrnPJCHvNZuDG6BWjUFVxeWyYlve_SVJO>
- Code link: <https://github.com/codinginflow/react-best-practices/branches/stale>

Paper Reading: DeepSeek R1 - Incentivizing Reasoning Capability in LLMs via Reinforcement Learning

Session led by [Mike A](https://www.linkedin.com/in/malik-mike-a-32b63818b/) 

Join us for an insightful session on the groundbreaking paper, DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning. In this session, we will explore DeepSeek-R1, a state-of-the-art reasoning model that pushes the boundaries of reinforcement learning (RL) applied to large language models (LLMs). 

This paper introduces two novel models, DeepSeek-R1-Zero and DeepSeek-R1, showcasing advancements in reasoning capabilities through RL-driven self-evolution. Unlike traditional models relying heavily on supervised fine-tuning (SFT), DeepSeek-R1-Zero develops its reasoning abilities purely through RL, while DeepSeek-R1 combines RL with a multi-stage training pipeline for enhanced performance. 

The paper highlights exceptional benchmarks achieved by DeepSeek-R1 on math, coding, and STEM-related reasoning tasks, where its performance rivals that of leading closed-source models such as OpenAI's o1-1217. Additionally, we’ll discuss distilling these capabilities into smaller, more efficient models to make advanced reasoning accessible for diverse applications. 

Whether you're a researcher, developer, or enthusiast in AI and LLMs, this paper reading will provide an in-depth understanding of the novel reinforcement learning techniques driving DeepSeek-R1 and its implications for the future of AI-driven reasoning systems. Don't miss this opportunity to engage with cutting-edge advancements in the field! \[2501.12948\] DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning 

GitHub - deepseek-ai/DeepSeek-R1 

Mark Chen X Post: <https://x.com/markchen90/status/1884303237186216272?s=12&t=BSlMYtugAr8LLWXLnMLLrQ> 

GRPO Diagram: <https://www.reddit.com/r/LocalLLaMA/comments/1i78sfs/deepseek_r1_grpo_code_open_sourced/#lightbox> 

The Bitter Lesson: <http://www.incompleteideas.net/IncIdeas/BitterLesson.html> 

Gradient Descent Image: <https://miro.medium.com/v2/format:webp/1\\\*f9a162GhpMbiTVTAua_lLQ.png> 

V3: <https://arxiv.org/abs/2412.19437> 

DeepSeek Math: <https://arxiv.org/abs/2402.03300> 

rstar-math: <https://arxiv.org/abs/2501.04519> 

Verify Step-by-Step: <https://arxiv.org/abs/2305.20050> 

DeepSeek catch-up chart: <https://media.licdn.com/dms/image/v2/D4E22AQG552O63UNJWg/feedshare-shrink_800/B4EZTN\\\[…\\\]41824000&v=beta&t=ubyKQniaCJTL37PzIOJi9YZRo1AF8yipuauSioyn59U> 

UC Berkeley Student $30 replication of Aha: <https://x.com/jiayi_pirate/status/1882839370505621655> 

Deep Agent R1-V replication: <https://x.com/liangchen5518/status/1886171667522842856> 

s1: <https://arxiv.org/abs/2501.19393> 

DeepSeek-r1 cost breakdown: <https://semianalysis.com/2025/01/31/deepseek-debates/> 

R1 Deep Dive: <https://fireworks.ai/blog/deepseek-r1-deepdive> 

All in Podcast: <https://podcasts.apple.com/us/podcast/all-in-with-chamath-jason-sacks-friedberg/id1502871393?i=1000687638652> 

Peter Gostev LinkedIn: <https://www.linkedin.com/in/peter-gostev/> 

LLM Agents Learning: <https://llmagents-learning.org/sp25>

Engineer Your Ideal Tech Career [Part 17] - Closing Thoughts

Wrapping up the course, [Sophie](https://www.linkedin.com/in/sophienovati/) shares her motivations behind helping people achieve their most ideal and ambitious career outcomes and some ways to connect further.

We hope you leave this course with a crystal clear vision of what brings you excitement as an engineer and how to take that next step to get there.

Thanks for watching!

Looking for mentorship from tech’s top engineers + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Engineer Your Ideal Tech Career [Part 16] - Specialization

Now, depending on which specialization you’ve landed on, your near-term next steps and interview expectations also vary.

In your current role, the advice may be to start shipping easter eggs, optimizing for teams with grand scale, or rapidly learning new technologies.

Should you be thinking about a change soon, there are also actionable interview prep tips, particularly around system design, (and mistakes to avoid!) in this section.

Looking for mentorship from tech’s top engineers + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Engineer Your Ideal Tech Career [Part 15] - Role Types

Depending on what role you’ve narrowed your sights on, there are a number of things you can do in your current role to begin charting progress — from picking a specialization, to start scoping projects and reviewing code, to volunteering for mentorship opportunities and hiring.

Should you be thinking about a change soon, there are also actionable interview prep tips (and mistakes to avoid!) in this section.

Looking for mentorship from tech’s top engineers + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Engineer Your Ideal Tech Career [Part 14] - Defining Near-Term Goals

Moving into your last section and with inspiration from the engineers you just heard from, you can expect to start defining near-term goals that you can implement within the next week, month, or quarter, to start charging towards your ideal long-term career.

This section will include tangible advice you can implement on the job or if you are preparing for interviews.

Looking for mentorship from tech’s top engineers + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Engineer Your Ideal Tech Career [Part 13] - Daniel Tomko: Choosing The Tech Lead Route

Lastly, we have [Daniel Tomko](https://www.linkedin.com/in/danieltomko) (ex-Meta, ex-Microsoft, Head of Instruction at Formation) reflect on his experience as a Tech Lead.

He points out some common misconceptions, how the role may vary company to company, and then shares a real-life example of the great magnitude and scale of impact that being a tech lead can drive.

Looking for mentorship from tech’s top engineers (like Daniel!) + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Engineer Your Ideal Tech Career [Part 12] - Mitali Gala: Choosing The Engineering Manager Route

Next, [Mitali Gala](https://www.linkedin.com/in/mitali-gala) (a Mentor at Formation) discusses her decision to charge forward as an Engineering Manager and what that entails for her day-to-day work.

She reflects on some of the challenges, some of the highlights, why she is passionate about this work, and who it would be a good fit for.

Looking for mentorship from tech’s top engineers like Mitali + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Engineer Your Ideal Tech Career [Part 11] - Michael Novati: Becoming A High-Level IC

Next, [Michael Novati](https://www.linkedin.com/in/michaelnovati) chats about his impressive career advancement and passion for high-level IC work. Michael progressed from a new grad engineer to Staff engineer at Facebook within 3 years, and then Senior Staff after.

He reflects on the key steps he took to progress quickly, common misconceptions people have about being a high-level IC, and the types of people who may love this work longer-term.

Looking for mentorship from tech’s top engineers + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Engineer Your Ideal Tech Career [Part 10] - Sophie Novati: The Founder Journey

This video kicks off a section of 4 videos in which you’ll hear from different accomplished engineers on their career paths and what drew them to that route.

Starting us off, [Sophie](https://www.linkedin.com/in/sophienovati/) (course author!) provides more context into how she became a founder, the typical founder path, and why she has a deep admiration for the work she does.

Looking for mentorship from tech’s top engineers + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Engineer Your Ideal Tech Career [Part 9] - Becoming A Founder

In this video, Sophie shares the advice that she often gives to people who want to explore becoming a founder from the perspective of being a founder herself. She then tactically explains what’s required as a founder, and ways to compensate if you don’t have (or are interested in) 100% of the necessary skills.

Looking for mentorship from tech’s top engineers + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Engineer Your Ideal Tech Career [Part 8] - What Stage Of Company?

In this video, we walk through common traits among different company sizes and also how they differ vastly. We also talk through a key mistake many engineers make when thinking about company size and stage.

Depending on how you like to work, the idea of which company size you want to shoot for should become more clear.

This video covers three main company types:

- Start-up
- Growth stage
- Large company

Looking for mentorship from tech’s top engineers + personalized job hunt assistance and interview prep? [Formation.dev](http://Formation.dev) can provide you unlimited career coaching, technical mentorship, personalized practice, and mock interviews. Join us here: <https://formation.dev/partners/taro>

Worksheet: [Formation - Coding Your Career](https://firebasestorage.googleapis.com/v0/b/tech-career-growth.appspot.com/o/courses%2Fslides%2FFormation%20Career%20Direction%20Worksheet.pdf?alt=media&token=f6344b78-529a-411e-a449-7a34a8d55fc8)

Tech Career Growth Videos

Our instructional videos provide software engineers with insights needed for career growth. Masterclasses go incredibly in-depth on a specific tech topic while case studies are real examples from established engineering leaders.