The React Show

We’re always working with components, but do we know when they mount or unmount or even what that actually means? Do we know how effects play into the lifecycle of a component? On this episode, we’re going to take a close look the lifecycle of a React component; what it is made up of and how it interacts with the rest of your program.

Show Notes

• Intro
• Overview
• Background
  • Story about defining a component inside of a component (starts with tests/cypress)
    • React has to check if the definition of a component has changed
  • What actually is a component?
    •  Nothing more than a function with bookkeeping
  • Lifecycle
    • Mounting
      • Default state/props
    • Updating
      • Runs function code but doesn’t use default state/props
      • Updates the DOM when complete
        • other than useLayoutEffects
    • Post-Updating / Effects
      • useLayoutEffect, synchronous, after DOM update but before paint
      • Runs hook code sometime after component code completes running and DOM is updated, asynchronous
    • Unmounting
      • Hook cleanup
  • lexical scope
• Solutions
  • Creating lifecycle methods with useEffect properly
    • useLayoutEffect vs useEffect
    • Dependency array
    • useOnce (similar to onMount)
      • Similar to onMount but different because uses useEffect vs useLayoutEffect
      • useRef - ref.current will be undefined on first run
      • set ref.current to true after running hook code
    • onUnmount
      • AFAIK there is no way to on unmount in a function component
      • But you shouldn’t need to, if you use cleanup effects properly
  • Updating State
    • Prefer updating in event handlers vs useEffect
      • Event handler is more synchronous/easier to reason about
  • Divisions between components/how to divide up your components/hooks
    • Should this influence how we divide up our components?
      • Generally no, abstractions should, not mechanics or performance
• Tangent: best practices
• Summary

You probably know that software licenses exist, but do you know what implications they can have on your business or project? Did you know not paying attention to them can be extremely costly? In this episode we’ll talk about software licensing, how it can affect your business or project, how you can navigate it, and which license to choose for your project.

Links

• Companion YouTube Video

Show Notes

• Intro
• Overview
• Consequences of using the wrong license
• What is software licensing?
  • A legal contract between the party providing the software or source code and the end user
• Common types
  • Free Software (gives the recipient extensive rights to modify and redistribute)
    • Copyleft / Free-Libre / FOSS (protective)
      • GPL, AGPL
      • Right to freely distribute and modify but derivative works must carry the same rights
      • Opinion: Software end-user focused, attempts to protect end-user rights
    • Permissive (can relicense, allows proprietization)
      • Some BSDs, MIT, Apache, MPL
      • Minimal restrictions, can be used, modified, redistributed
      • Opinion: Software creator focused, attempts to make life easier on creator
    • Public Domain & Equivalent (grants all rights)
      • Very complicated, often depends on country of origin and use
  • Proprietary (traditional copyright, no rights necessarily granted)
• License Compatibility
• React projects: make sure to include OSS licenses in builds/distributions
• Can you copy/paste code you find on stackoverflow, documentation, the internet?
• Trademarks
• Don’t add or modify licenses
• Distribution
• Analyzing Licenses for Inclusion in a Project
• Picking a Software License for a Project
• Attribution
• Summary

Want to get a job as a React developer? What’s the best way to go about it? In this episode we discuss different paths to becoming a React developer and which one might be the best for you.

Links

• Companion YouTube Video: Easiest Way to get a Software Job
• Study: Does Stress Impact Technical Interview Performance?

Show Notes

• Overview
• Thomas Experience
  • CS degree, joke in a different way
  • ran the gauntlet
• Austin Experience
• State of Software Interviewing
  • Well known to be very broken
  • Does not accurately gauge ability to do job
    • One study found interviewers are primarily judging level of anxiety
    • Obviously data-structures & algorithms are irrelevant to nearly all programming jobs (especially React)
      • Blame Google
      • One time Yelp was asking me about bits and bytes for a JS job
    • Requires studying for weeks on stuff you don’t need to know even if you’re senior level
    • Interviewing environment, like whiteboard, way different than real life
    • Some people are great at this
  • Why does this happen?
    • Google
    • High-risk for hiring company
    • Very conservative decision making
    • Many candidates, trying to filter without investing in more personnel
• Getting paid to interview
• How to gauge someone’s ability to do the job?
  • Best way: see them do the job
• Contracting/Consulting
  • Lower-risk for hiring company
  • Generally leads to employment offers
  • Much better gauge of how well you can actually do the job
  • Generally doesn’t involve so much ds&a
• Either way, best thing to do is build
• Summary

Hot takes on React, async programming, and other topics in this special episode of the React Show where we join the hosts, Austin & Thomas, on a QA session.

Episode page

Show Notes

• Intro
• Announcements: Discord
• Overview
• What is your favorite program you’ve ever worked on or built?
  • What makes it your favorite?
• What is your dream program to build?
• Have you ever considered a different career than programming?
  • Have you ever thought about it after starting programming as a career?
• What do you think of React?
  • Why React and not something else?
• If you could change anything about React, what would it be?
• What is your favorite aspect of programming?
• What is the most difficult part of programming for you?
• What programming languages do you know?
• How do you feel about web forms within React?
• Are you more interested in building apps or programming?
  • Or something else related to programming?
• Summary

Refactoring can be dangerous, to your program and to your health. In this episode we discuss techniques to enable safe and healthy refactoring methods.

Show Notes

• Story time
  • (Thomas) I used to have delusions of grandeur about my refactoring ability
  • Austin recent project
• Purpose: to make the code better
• The challenge, how to do it so that:
  • You don’t break things unintentionally
  • You don’t get mired in the details and unable to move forward
  • It doesn’t take forever
• Method
  • Code is the way it is for a reason
  • Incremental
    • Keep a working version
    • Develop in parallel
  • Contracts
    • Don’t break contracts until you have a working replacement
    • Contracts are:
      • between input and output
      • functions
      • components
      • interfaces
      • libraries
  • Bottom-up
    • Don’t worry about code duplication until the end
    • Avoid “second-system” effect
  • Try to understand why the original system was created the way it was, don’t assume you know better, even if you do
• Story time
  • I’m working on a large refactoring project involving the inventory system
  • No down-time, must be 100% accurate
  • I’m building it:
    • In parallel with the existing system until it proves to be a worthy replacement
    • Incremental, developing and deploying many smaller pieces along the way
    • NOT as one large project that gets deployed all at once 

Have you ever wondered why your app is slow sometimes? Or why a specific action takes so long to fully run? Or maybe why it takes so long for your initial render? The React Profiler is a great tool for diagnosing these issues. In this episode we take a look at profilers in general and then dive deep into the React profiler and how you can use it to diagnose performance issues.

Show Notes

• Intro 0:00
• Small Talk 1:20
• Announcements 4:20
• Overview 6:09
• What is a CPU profiler? 7:18
• Tracing vs Sampling 9:07
• How to enable the React Profiler 15:21
• Profiler dev tool 18:30
• Profiler Settings 34:05
• What can you do with the results? 37:26
• Summary 55:35

Hosting can get overwhelming fast, because it isn’t just hosting anymore. You want something that is simple, fast, scalable, and reliable but you also want to spend your time coding and not fiddling with build failures, right? In this episode we’re going to take a look at the factors involved in making hosting, devops, and CI/CD decisions and a method for developing the right solution for you.

Show Notes

• Overview 10:16
• Austin Experience: Hosting on Raspi
• Thomas Experience: Geocities, Linux, PaaS, AWS/GCP
• Factors: Team, Orchestration, etc 20:49
• Method: start simple, build incremental 25:40
• Recent Past Experiences: Heroku, Beanstalk, Vercel, more 36:05
• Self Hosting/Hosting PaaS 42:28
• Containerization 1:00:05
• Automation: GitHub/GitLab/etc 1:10:08
• Summary 1:23:08

Usually we are focused on adding new features, fixing bugs, and meeting deadlines, but what if the software we are building was also killing the planet? In this episode we’re going to take a look at the ecological impact of React applications, how to measure it, and how to reduce the impact on the planet that sustains us all.

Episodes now posted with show notes and links on https://www.owlcreek.studio/podcast

Show Notes:

• Performance related to ecological impact
• Discussion on why ecological impact is not a high priority 10:32
• React takes a ton more resources than a good vanilla JS app 14:49
• Optimize common tasks / main render path 22:02
• Different than normal performance optimization 22:16
• CPU wakes / sleep states 22:32
• Package size / network transmission / write less code 27:08
• Reduce the minimum hardware requirements 34:24
• Carbon Neutral / Negative 43:32
• Much, much, much better to just generate less pollution to begin with
• Forced upgrades 49:31
• Right to repair 50:21
• Long-running server tasks / Data processing / AI training 53:24
• Tools 1:08:30
• JS browser dev tools
• React Profiler
• powertop (linux only?)
• Simple watt meter
• Announcement: Podcast with notes on owlcreek.studio 1:14:25

Do you find React Router cumbersome or tedious to work with sometimes? Or are you just curious how routing could be done better? In this episode we take a look at how routing is done in NextJS. We discuss what it looks like and how to use it. And we also offer our opinions on the NextJS routing mechanism itself.

Show Notes

• Intro
• Overview
• What is routing? What are routes?
  • routing is choosing which component to render for a given path and in nextjs,  or API routes
  • relevant multi-page apps
• Before Nextjs
  • vanilla react
  • react router
  • how to create routes
• With Nextjs
  • pages/routeName.js
  • nesting
• Dynamic Routes
  • blog
  • using getServerSideProps to load slug [slug].js from sanity
  • getServerSideProps Redirect example
• Opinions on: file based data-store / framework / NextJS
• Api Routes
  • api folder
  • dynamic routes
    • auth0 library
• Summary
• Outro

It can be tempting to take the lazy approach to debugging and just start trying things, but I believe there is a much better way. In this episode we take a look at a method that works well for ensuring your debugging is productive, targeted, and successful.