The React Show

Have you ever gotten burned out? Or do you want to learn how to prevent it from happening in the first place? In this two part series, Brian Wetzel, former CTO of Softgiving, discusses his own experiences with burnout and what we can do on a personal level as well as a engineering and process level to mitigate the chances of burnout.LinksContact Brian: brian@wtzl.softwarePart 1Episode PageTwitter Owl CreekTwitter Thomas HintzSupport the show

Have you ever gotten burned out? Or do you want to learn how to prevent it from happening in the first place? In this two part series, Brian Wetzel, former CTO of Softgiving, discusses his own experiences with burnout and what we can do on a personal level as well as a engineering and process level to mitigate the chances of burnout.LinksContact Brian: brian@wtzl.softwareEpisode PageTwitter Owl CreekTwitter Thomas HintzSupport the show

In any application, not just Javascript based ones, user input is one of the foundational pieces for user interaction with the application, the server, and with others across the web. In order to capture user input, you need forms. In this episode, we’ll explore the box form support provided by React with the basic HTML form elements like input, textarea and select, as well as libraries that have been developed to enhance form creation, as well as to perform validation. LinksEpisode PageTwitter Owl CreekTwitter Thomas HintzYouTubeResourceshttps://reactjs.org/docs/forms.htmlhttps://reactjs.org/docs/uncontrolled-components.htmlhttps://react-hook-form.com/https://github.com/tannerlinsley/react-formhttps://formik.org/Show NotesHTML + CSS as a basis for creating websitesJavascript leads to enabling more user input and interactivity optionsGathering user input without forms is possible, but forms make things simplerWhat are forms?Forms are the typical method we user input required to interact with an ecosystemHighly opinionatedMany ways to do themSecurity, validation, accessibility etc.Lots to consider, what is the best way to do this in React?Working with What We Have in React and Javascript/HTMLControlled vs UncontrolledValidationpreventing server side hackingensuring validity of datachecking each field on submissionregexWhere vanilla react forms fail?large swathes of setStates or managing a large state objectmultiple types of validation, shared validationlots of vanilla code to cover existing and potentially future casesyou end up just creating your own form framework, so why not use an existing one?Form FrameworksWhat are some options? Why do they exist?React Hook FormsFormikRecommended by React TeamReact FormsPart of the Tan Stack (React Query Family)React Hook FormsControlledFormControlled Components abstractionRestricted to using Form State for Component state??Validation FrameworksvalidatorYup for ValidationSupport the show

Upcoming in a React release is React Server Components. No, they aren’t just Server-Side Rendering. In fact, they are quite different and quite powerful in their own way. In this episode we learn about React Server Components and discuss how they could be used in applications of the future.LinksEpisode PageTwitter Owl CreekTwitter Thomas HintzYouTubeResourceshttps://blog.plasmic.app/posts/how-react-server-components-work/https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.htmlhttps://vercel.com/blog/everything-about-react-server-componentshttps://www.patterns.dev/posts/react-server-components/https://blog.bitsrc.io/react-server-components-1ca621ac2519Show NotesOverviewPerformance, Load Time, Etc Critical for success53% of users abandon a website if it takes more than 3 seconds to loadUsers are not interested in using apps that have poor performance, don’t feel rightSo many ways to tackle the problem, what method to pick?Bundle Optimization with Webpack, etc.Performance Audits in AppServer Side RenderingWhat are React Server Components?Before RSC, all components were rendered in the browser...With RSC, parts of the React Tree can be rendered by the browser, and other parts are rendered on the server.How is it different than Server Side Rendering?What are the main benefits of using React Server Components?How do React Server Components work?component.server.jsx, component.client.jsx , component.jsx Client Components cannot import Server Components, only regular or Server components can.Server Components can import Client components and Server components, and then within that, you can nest Server Components under Client Components.Lifecycle of a React Server ComponentServer receives request to renderServer serializes root component element to JSONBrowser reconstructs the React treeHow can we get started implementing?Vanilla React Implementationreact-server-dom-webpackNextjs ExperimentalShopify HydrogenSupport the show

In this episode we learn about the primary data structure underlying the React rendering process: React Fibers. With this knowledge we take a look at some of React’s design and how fibers impact development.LinksEpisode PageTwitter Owl CreekTwitter Thomas HintzYouTubeResourceshttps://github.com/acdlite/react-fiber-architecturehttps://blog.logrocket.com/deep-dive-into-react-fiber-internals/https://philippspiess.com/scheduling-in-react/https://programmingwithmosh.com/javascript/react-fiber/https://www.velotio.com/engineering-blog/react-fiber-algorithmShow NotesWhat causes Jank? How do you get concurrency?Jank is when we need to update the UI but we can’t because we’re still processing some other workBreaking down “work” into small, discrete units of workHow does React render?Phase one: reconciler phasePhase two: render to DOM/mobile/etcJavaScript execution modelJavaScript is single thread, no real concurrencyEvent QueueStack frameReact RendersThey can take a long timeUpdates could potentially be batchedSome updates, like animations, keyboard events, should be prioritizedProcessing an API response is less priorityWhat are fibers?A data-structureBreaking down reconciler phase in discrete units of work run in a loopContain a priority levelContain state needed to pause and resume executionFibers are used to allow React to create its own schedulerHow does this help?React can control the execution modelPrioritizing and batching updatesCreating a “smooth” UX, less jankThings to watch forIf setting state based on a previous value always use the callbackGenerally don’t need to watch for much, React has your backMy opinionIt’s a clever, very inefficient, workaround for lack of proper concurrency in JS execution modelIt means giving up control to React, good and bad...Support the show

Stop getting midnight calls because you broke the site on the last deploy: use Cypress for front-end testing! In this episode we talk about how we use the free, open-source testing framework Cypress to save time, catch bugs, and sleep better at night.LinksEpisode PageCypressTwitter Owl CreekTwitter Thomas HintzYouTubeShow NotesWhat is integration testing?What are other types of testing?UnitStory Time, life without good testsStories about poorly written testsProblem: new features get priority over testingGood tests with good coverage speeds up development!I always write tests before refactoring because you can go wild and know that all you have to do is get the tests to pass in the endGood tests give confidence: you can write new features/code a lot more quickly because you don’t have to think about breaking things, if somethings breaks you’ll know and you can fix itInfrastructure investment: it’s like investing in better roads and transportation networks, it has an upfront cost but you can move people and goods faster and more efficiently afterwardsSolution: new features priority over testingEstimates include testingDon’t demo until you have tests if demoing puts on pressure to finish before you wrote testsWhat to test? / Testing priorities?Integration first (ensures things actually work for the end-user)Then unitWhat is Cypress used for?Integration TestsUnit TestsWhat makes Cypress best suitable for the task?FastConsistentScreenshots, videos, logsNetwork request spies, spoofingCI IntegrationDashboardWhat I don’t like about Cypress:Async APIMaybe necessary for this because of JS?Successfully Maintaining Tests?When to write tests?Cypress tips & tricksCustom commandsCapturing valuesExample: capture a numeric value, do test, check that the new value is correct based on old oneSupport the show

Join Chris Keen, of Keen Concepts, in learning about being and becoming a React contractor and how to succeed long term.Chris Keen has been a highly successful React consultant for over 7 years, a web contractor for nearly two decades, and is the founder of Keen Concepts. In this episode, we’ll learn from Chris how to become and stay a successful React contractor.Episode PageLinksKeen ConceptsChris Keen LinkedInChris Keen StackoverflowChris Keen GithubSupport the show

A great way to improve the UX of most React applications is to include a query caching layer. In this episode we talk about why it can be be so important and some techniques to implement it well.Owl CreekReact QuerySWR (For Next.js)Show NotesIssuesExample, data hooks based on another data hook; “location” hook used everywhereIssues with vanilla data fetching hooksEvery component/page refetches everythingEverything re-rendersDelays while waiting for parent hooks to return dataNot triggering requests at the correct/ideal timeShould be when the user clicks the button to open the new page, not when the new page component is loadedHow to structure dependent data flows and refetches?Could also use global stateUpdate endpoints that return new data/objectScroll recoveryPaged endpointsrefresh intervals️️️ResolutionQuery caching/fetching logic libSWR, React Query etcTell lib what endpoint to hit and under which conditions, assigning that setup a keyLib stores result with a keyEverything is done via that key, if the cache has a value for it it will return itReturns the same value every time the hook is used so it doesn’t cause a re-render, smoother appStale-while RevalidateLoading statekey/value store with fetching logic built indownsidessome places where it isn’t needed, appropriateComplicatedRQ has good dev tools, use them!Triggering requests at the correct/ideal timeGenerally use endpoint paths as keysscroll recoverypaged endpointsdependenciesrefresh intervalshook for creating RQ endpointsSupport the show

As React Developers, we’ve definitely got the front-end under control, but what about the back-end? One of the core components of a successful application is your Database. What is a Database? How do you choose the right one? Where do you host it? We’ll answer all your questions and share some experiences on Where and How to Store Data from your React ApplicationShow NotesIntroNew Year’s ChatData is fundamental to solving every programming problemFirst thing I do, whether it is writing an app or designing an algorithm or creating a library is look at the dataWhat is the structure and how I will interact with itFrom Hard Coded Values to Your First DatabaseParalysis by Analysis due to lack of knowing optionsStarting with something that you don’t know well and it takes up all your timeMaking the wrong choice and sticking with it even though it causes more problemsMaking wrong assumptions on how you write your front-end, and it doesn’t sync up well with the way you are receiving dataMaking the Right ChoiceWhat is the structure of the data?Who is the data for?How is the data accessed?How to choose the right type of data storage?Types of Data StorageRelational DatabasesGreat for CRUDTypically the best to start withSimple data modelsNeed to know SQLGood enough to use for most thingsKey Value StoresFast access + updates to self contained datasets?Document StoresGood for specialized casesGraph DatabaseWhat is a graph?Network of Vertices and EdgesCommon AlgosShortest path between two verticiesAllows relations via whole networksFind the path between two nodesMaintenance resources?Choosing librariesSQL LiteFile Based Relational Storageoption for when Code changes every few yearsRunning your own Database ServerCheck if it’s runningUser AccountsApp logins, connection maintenanceoption for when Code changes frequently?How often does the code-base change?Where to Host Your DatabaseSelf HostedPrivacyMore “maintenance” but not really if you do it right.Databases As a ServiceNo Guaranteed PrivacyExtra costs associatedHerokuSanityWrap UpStarting with Something you knowMigrate when you needWhat to look for when researching new optionSupport the show

A lot of us end up wasting a lot of time doing repetitive tasks. But we also worry that learning a new scripting language or keyboard shortcuts will be more work than it’s worth. In this episode we discuss a method you can use to find the right things to optimize.Support the show