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.LinksEpisode PageTwitterShow NotesIntroOverviewBackgroundStory about defining a component inside of a component (starts with tests/cypress)React has to check if the definition of a component has changedWhat actually is a component? Nothing more than a function with bookkeepingLifecycleMountingDefault state/propsUpdatingRuns function code but doesn’t use default state/propsUpdates the DOM when completeother than useLayoutEffectsPost-Updating / EffectsuseLayoutEffect, synchronous, after DOM update but before paintRuns hook code sometime after component code completes running and DOM is updated, asynchronousUnmountingHook cleanuplexical scopeSolutionsCreating lifecycle methods with useEffect properlyuseLayoutEffect vs useEffectDependency arrayuseOnce (similar to onMount)Similar to onMount but different because uses useEffect vs useLayoutEffectuseRef - ref.current will be undefined on first runset ref.current to true after running hook codeonUnmountAFAIK there is no way to on unmount in a function componentBut you shouldn’t need to, if you use cleanup effects properlyUpdating StatePrefer updating in event handlers vs useEffectEvent handler is more synchronous/easier to reason aboutDivisions between components/how to divide up your components/hooksShould this influence how we divide up our components?Generally no, abstractions should, not mechanics or performanceTangent: best practicesSummarySupport the show

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.LinksCompanion YouTube VideoPodcast PageShow NotesIntroOverviewConsequences of using the wrong licenseWhat is software licensing?A legal contract between the party providing the software or source code and the end userCommon typesFree Software (gives the recipient extensive rights to modify and redistribute)Copyleft / Free-Libre / FOSS (protective)GPL, AGPLRight to freely distribute and modify but derivative works must carry the same rightsOpinion: Software end-user focused, attempts to protect end-user rightsPermissive (can relicense, allows proprietization)Some BSDs, MIT, Apache, MPLMinimal restrictions, can be used, modified, redistributedOpinion: Software creator focused, attempts to make life easier on creatorPublic Domain & Equivalent (grants all rights)Very complicated, often depends on country of origin and useProprietary (traditional copyright, no rights necessarily granted)License CompatibilityReact projects: make sure to include OSS licenses in builds/distributionsCan you copy/paste code you find on stackoverflow, documentation, the internet?TrademarksDon’t add or modify licensesDistributionAnalyzing Licenses for Inclusion in a ProjectPicking a Software License for a ProjectAttributionSummarySupport the show

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.LinksCompanion YouTube Video: Easiest Way to get a Software JobStudy: Does Stress Impact Technical Interview Performance?Show NotesOverviewThomas ExperienceCS degree, joke in a different wayran the gauntletAustin ExperienceState of Software InterviewingWell known to be very brokenDoes not accurately gauge ability to do jobOne study found interviewers are primarily judging level of anxietyObviously data-structures & algorithms are irrelevant to nearly all programming jobs (especially React)Blame GoogleOne time Yelp was asking me about bits and bytes for a JS jobRequires studying for weeks on stuff you don’t need to know even if you’re senior levelInterviewing environment, like whiteboard, way different than real lifeSome people are great at thisWhy does this happen?GoogleHigh-risk for hiring companyVery conservative decision makingMany candidates, trying to filter without investing in more personnelGetting paid to interviewHow to gauge someone’s ability to do the job?Best way: see them do the jobContracting/ConsultingLower-risk for hiring companyGenerally leads to employment offersMuch better gauge of how well you can actually do the jobGenerally doesn’t involve so much ds&aEither way, best thing to do is buildSummarySupport the show

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 pageShow NotesIntroAnnouncements: DiscordOverviewWhat 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?SummarySupport the show

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 NotesStory time(Thomas) I used to have delusions of grandeur about my refactoring abilityAustin recent projectPurpose: to make the code betterThe challenge, how to do it so that:You don’t break things unintentionallyYou don’t get mired in the details and unable to move forwardIt doesn’t take foreverMethodCode is the way it is for a reasonIncrementalKeep a working versionDevelop in parallelContractsDon’t break contracts until you have a working replacementContracts are:between input and outputfunctionscomponentsinterfaceslibrariesBottom-upDon’t worry about code duplication until the endAvoid “second-system” effectTry to understand why the original system was created the way it was, don’t assume you know better, even if you doStory timeI’m working on a large refactoring project involving the inventory systemNo down-time, must be 100% accurateI’m building it:In parallel with the existing system until it proves to be a worthy replacementIncremental, developing and deploying many smaller pieces along the wayNOT as one large project that gets deployed all at once Support the show

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

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 NotesOverview 10:16Austin Experience: Hosting on RaspiThomas Experience: Geocities, Linux, PaaS, AWS/GCPFactors: Team, Orchestration, etc 20:49Method: start simple, build incremental 25:40Recent Past Experiences: Heroku, Beanstalk, Vercel, more 36:05Self Hosting/Hosting PaaS 42:28Containerization 1:00:05Automation: GitHub/GitLab/etc 1:10:08Summary 1:23:08Support the show

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

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 NotesIntroOverviewWhat is routing? What are routes?routing is choosing which component to render for a given path and in nextjs,  or API routesrelevant multi-page appsBefore Nextjsvanilla reactreact routerhow to create routesWith Nextjspages/routeName.jsnestingDynamic Routesblogusing getServerSideProps to load slug [slug].js from sanitygetServerSideProps Redirect exampleOpinions on: file based data-store / framework / NextJSApi Routesapi folderdynamic routesauth0 librarySummaryOutroSupport the show

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.Support the show