As my career has progressed, the types of problems I face have also progressed - questions like "How should we architect this solution" and "How should we decide between these trade-offs". However, I've struggled to find resources to help me learn these skills. Are there any resources that you would recommend and, in general, how do you continue to learn and progress even as you reach more senior levels of development? How to get experience as a software engineer Resources to learn senior development skills

If I was just using plain React, I would use the Context API or even global variables to keep track of the state of an application. Whats the best way to achieve this when using Remix? useOutletContext P.S. You can definitely still use context if you like! Passing state across components in RemixJS

I have to manage my projects and outsource them, otherwise, I would never make enough money to keep my business afloat. I have this problem, where, when I start a project, the product owner will ask questions like, "What happens if you die?" and my best answer to that is, "That's why we have employees". But, when I go to hire employees, sometimes they completely just ignore the stack that I'm using and they go off and do their own thing, which becomes difficult to manage. Should I be ruling with an iron fist, or should I just be more of a liason between my clients and my developers? How To Deal with Hiring Developers?

I've seen you're using the Express adapter for your Epic Stack and your personal website, as opposed to just running the Remix dev server. Why is that? Are there any performance implications? Why do you use the Express adapter for your app?

What is the minimum skill set one need for a front end dev job. Do you need to know version control, testing, tooling etc or is js html css and a framework enough, also is typescript considered. Minimum skills for a Frontend dev job?

With React Testing Library v14, what are the benefits of using the userEvent.setup() for every test vs not including it? user event docs user event setup docs userEvent.setup vs not including it in unit tests

AI tools like GitHub Copilot have the capability of boosting our performance during development. What effects of using such tools to practice a course might have on the learning curve? Are AI tools (Copilot) bad for the learning curve?

Church of Jesus Christ of Latter-day Saints, FrontEnd/React developers, Peruvian Folklore Dancer Champion, Now approx. 2 years as a React/FrontEnd developer, and I am so hungry to continue to learn and improve. I feel I need to be surrounded by the best and I would love to work closely with you Kent I admire you a lot! or please give me advice on how to achieve it. - I would like to bring value to the world through my work Thank you! Have a great day brother! How to get experience as a software engineer Solidifying what you learn Becoming one of the best React developer

Hello, Kent! My name is Petar and I'm from Bulgaria. I'd like to ask your opinion on this question: Do you think that the "Epic Stack" is relevant for people who are relatively new to web development? Here's some information about me: my interest in web development started about a year ago. Currently, I feel really confident in HTML, CSS, JavaScript, React, and TypeScript. I have read a lot of books and completed numerous courses on these topics, including the HTML course on web.dev, the CSS course by Josh Comeau, the books by Nicholas Zakas on JavaScript, the JS course by Dan Abramov, Epic React, and the "Learning TypeScript" book by Josh Goldberg. I also purchased your testing course but haven't had the chance to complete it yet. Currently, I don't have a job, but I'm planning to land one soon. My question to you, again, is whether you think sticking with the Epic Stack would be beneficial for me, or if it's better to focus on already established technologies in the market such as Redux, Next.js, etc. I just want to hear your honest opinion, even if it may be (or become) wrong. The Epic Stack (blog post) The Epic Stack (announcement talk) epicweb-dev/epic-stack (github) Is Epic Stack beneficial for new developers?

I just went through react hooks workshop and I don't know weather I understood concepts well or I just went through material. I want a general approach to similar situations. EpicReact.dev learning club schedule template How to approach imposter syndrome

How do you handle network issues in a Remix App? Is Remix's error handling as good as traditional SPAs? What about maintaining form state even after the submission fails? Discussion #5957 Error Handling in Remix

Many times we need to run e2e tests in other to be able to test "secondary" actions. Like, I have to create a resource to delete it, so I could test the create inside of the delete test but it does not sound "good". How to solve that? Common Testing Mistakes How do you plan E2E test flows?

Given that there is dedicated backend with API's which needs to be consumed in a dashboard written in React, why should i choose SSR over CSR if I am not worried about SEO or JS payload (as I can use code splitting to keep the JS to minimum) How Remix fits 6 different web apps When/why should I choose SSR over CSR?

What are some side income options for software engineers? 🚨 Big Announcement: I'm a full-time educator! 👨‍🏫 2010s Decade in Review Side income

As there are so many different kinds of apps that we can build for browsers, how does Remix fit those different cases? Is Remix a great fit for one but maybe not for another? Can all be built with Remix? Remix VS Next How Remix fits 6 different web apps

Kent, your tweet about 'It's not what you know, it's not who you know, it's who knows you' made me question my beliefs. I believe that building strong relationships and possessing knowledge are key to being well-connected. Could you elaborate on what led you to make this statement and how you believe it applies in personal or professional success? Is it really all about who knows you?

Which technologies would you use to make a video streaming website. Tech to use for a video streaming site

What are Kent's thoughts on Vitest.dev? Should we transition from Jest to Vitest

Is there any way to get a bundle analysis on Remix apps, like the Webpack does? esbuild analyzer Spot in the remix source code to write the file Path in the built code: node_modules/@remix-run/dev/dist/compiler/compileBrowser.js (around line 244) fs.writeFileSync('meta.json', JSON.stringify(metafile)) Good luck! What's the bundle analysis story in Remix?

If you have a loader and you throw a response so your CatchBoundary catches it, how can you set a title? Since you throw, there is no way to return json with the appropriate title 🤔 How to set titles in CatchBoundary's in Remix?

Kent's outlook on Remix v2 Routing Convention and his use current use of Kiliman's remix-flat-routes package. Remix Flat Routes – An Evolution in Routing – Michael Carter, Remix Conf Europe 2022 remix-flat-routes Remix Flat Routes v2 docs Remix Flat Routes RFC v2 Routing Convention

The call I placed is basically to seek advice on how to go about a certain challenge I am facing now in my programming journey. How to get experience as a software engineer Seeking for solution and advice to progress

React Hooks: What's going to happen to render props? When to break up a component into multiple components What is your latest thinking on render props?

I would like to know your take on inline styles on large scale projects. Personally I am big fan of inline styles or having all styles in my jsx file. Also take on using Tailwind over a design system. Inline Styles vs CSS File Styles

I will speak about Hydrogen at Remix conf and some others, and I'm now brainstorming about new talk subjects...all about Remix! I am looking for some insight to do the best choice! Looking for the best talk idea

This is a discussion we were having on twitter. :D Centered Tips on making the most of your short breaks

I work at a smaller developer company with a big backend team. Everybody is afraid of using NodeJS so we're limited to simple SPAs as those only need an NGINX server and you're good to go. I was pushing for NextJS and nowadays Remix as I really like it, but I always feel blocked. What should I do? How could I convince my colleagues to give Remix a try? React Router Upgrade Guide Migrating your React Router App to Remix Advice for a company afraid of using Node

The official Redux recommendation is to avoid testing thunks in isolation and instead opt for integration testing with redux connected components. The main reason given is that thunks are considered implementation details. Why are thunks considered implementation details? 
 In the context of async thunks in RTK can you give examples of how testing an async thunk might lead to false negatives and false positives in our tests? 

 What are your opinions on testing thunks in isolation that conditionally dispatch other actions, something that my team at work often does. Example of a custom render method (docs on this) How are redux thunks implementation details?

Useffect needs always dependencies though we only perform that action once say for example api call, do we really need dependency for single call as well? Use memo and use callback seems in which specific scenarios we use, cause otherwise we might endup with lot of useless usememo and usecallbacks. Apart from this, what you want to suggest in general to make me a good react developer in terms of debugging and developing faster and understanding well. Doing personal projects, my mistakes are I am using unneccesary stuff like context usereducer for small stuff just to learn something. Is this common how to avoid this mistakes? React Hook Pitfalls - Kent C. Dodds - React Rally 2019 Myths about useEffect When to useMemo and useCallback EpicReact.dev What makes a good react js developer?

Looking to find my people in the AWS world that want to help others make some money without exploiting anyone. AWS Job Opportunity

Where can I find your courses on Playwright and how are you involved in the community? Playwright Playwright Discussions Playwright Discord Playwright support

In order to understand a little more about your process of creating and maintaining a npm package, three questions were asked, to know the stack used, what support for them normally and whether or not there is a template that you can share with more. kcd-scripts generator-kcd-oss Tips for creating a npm package (stack-supporting)

Transcript: Key Kent! Big fan since I started learning React many moons ago! My name is Asier and I hope you're having a good day. My question is about React custom hooks and your opinion on the following. Imagine there is one parent component in charge of rendering two children components. This parent component is using a custom hook to retrieve some relevant data, let's say that it receives the user name and the date of birth for instance. The first child component requires a prop for the user name and another for the date of birth; and the second child requires another prop but only for the date of birth. My assumption was always to use the hook as close as possible to its usage, in this case, within both children components and not in the parent component. What should be the more readable choice between using the hook just once in the parent component and drilling the props downwards to the children, as opposed to using the hook in each individual hook? Thanks! How close should a hook be to its usage?

Atomic Web Design by Brad Frost What's your opinion on atomic design?

Hi Kent! How would you handle file uploads in Remix? For example, the avatar for a user's profile. Or a PDF document? unstable_parseMultipartFormData Browser File API s3 example Cloudinary example How to handle file uploads in Remix?

It can be difficult to override tailwind classes with more tailwind classes because their precedence is based on style sheet order not order you apply them. How do you go about solving the problem? Tailwind class overriding

Fully typed apps are the correct approach. Let's say your API backend returns a 'full' type (of a Workshop type with 8 fields for example), and, secondly, a list of Workshops but this time only with a 'name' field. In the frontend, you have a 'full view', a 'list of workshops view' (showing only the name of each) and a 'preview view' of a Workshop which uses 3 of its 8 fields. How do you describe these types in the app and at the interfaces between the frontend and backend? How do you deal with partial types?

Do you plan to update the testing course to add/update content to teach the "remix testing" methodology? I see you folks are using Playwright quite extensively even if it adds more time to execute. I'm very curious to know your "thought process" on these kinds of decisions The "remix" testing methodology

Hi Kent its Jan, What do you do in your action function in Remix for a page with multiple forms, if no intent matches? Let's say you have a page with two forms, one for deleting an entity and one for duplicating it. So the page has two forms each with a button of type submit, one with an intent of delete and one of with an intent of duplicate. Now what do you do if the request to that action function contains form data with neither intent? In Ryan's Remix single, where he shows how to handle multiple forms, his action is a void promise and returns nothing in the case where none of his intents match. But should you do that in a production app? Just don't do anything? Thanks for your help! And thank you for answering yesterdays question about testing tables, it helped me out tremendously. Take care! How to handle action matching no intent?

More info at the ever evolving ways to deal with CSS and what are Kent's preferred ways of handling CSS Latest practical CSS techniques (use Tailwind)

Question regarding the Express.js pipeline Kent takes when writing backend apps that differs form the conventional router->middleware->controller and treats the controller itself as middleware Middleware is an antipattern

I'm looking into testing tables with testing library and was wondering, how would you approach testing a semantic HTML table with React testing library? I found this issue (https://github.com/testing-library/dom-testing-library/issues/583#issuecomment-997347372) on Github, but there seems to be no definitive answer. screen.logTestingPlaygroundURL() Testing Playground The Accessibility pane Thanks a lot! How to test semantic HTML tables?

Quality contents, quality contribution to React ecosystem. Appreciation

Is it important to test the code in service files and in ngxs store files in angular? I was under the assumption that testing the component files were standard and I have been doing the same when using angular testing library MSW Testing Code in service files and NGXS Store files

can i use the md5 checksum of the json data as key for each row in react? so context here is that i have a bunch of rows to show, and they dont have an id, and i can't use index as their order may change. so i am using the md5 of the JSON.stringify of the rows data. but i am thinking that calculating the md5 or sha1 maybe a thing which shouldn't happen in the UI render cycle, specially cause the render can happen many times as things in the top change? Is using md5 as key an anti-pattern in react?

When you do your live streams, you take breaks regularly. Why do you do that? What's the science behind it? And what do you do during those breaks to make them as effective as possible? Centered (use the coupon code EPICFLOW for 50% off the first year of premium). Why do you take short breaks when coding?

addEventListener is usually frowned upon as an anti-pattern in the React world. Will this still be the case with Remix? What about in the framework-agnostic future of Remix? Is addEventListener OK again?

What learning path do you recommend for a frontend dev learning to become full stack? Remix Frontend to Fullstack

Starting a new testing project, and I'm wondering if it's a bad practice to set up all the necessary seed data in a beforeAll to run the test suite then or if isolation is critical so that work should be done in a beforeEach. We have an application that requires a decent amount of data to get up and run, so we're trying to figure out what might be the best practices. Avoid Nesting when you're Testing Test Data: To BeforeAll or to BeforeEach

what ways have you organized code for your courses? what are the trade offs and what is you preferred approach today? Joe's Tweet Kent's AMA answer organizing course code

How do you recommend to implement feature flags with Remix? Do you recommend a third patry library? Do you recommend query params? How to do feature flags with Remix?

If there is a specific library that has a functionality you need, would you prefer to rewrite yourself or use the library? Own Code vs Library

Why did you decide to migrate your tests from Cypress to Playwright? Are there any particular advantages? Would you recommend starting using playwright from now on? Twitter Question Would you recommend to use Playwright or Cypress?

self-promotion is a really difficult task to do either in public like on social media platforms or when you are among your co-workers and bosses and you wanted to talk about something you achieved but afraid that you will look like a bragger. How to Shamelessly Self-Promote?

There are a lot of IDEs and text editors. Why did you choose VScode? Why not more complex solutions like Webstorm? Why are you programming in VScode?

Whilst using remix I realized even after naming a file .client.ts and importing it into the remix page, it does not affect how remix generates html on the server. As an SSR framework it always generates the html on the server and so accessing the window becomes undefined. The solution to that is to run the code in useEffect. I was wondering if there are ways around that instead of having to throw in a bunch of useEffect to solve that. Next.JS has next/dynamic import which can be used and also by setting { ssr: false } , I don't have to worry about window being undefined. Thanks Remix: ways around window undefined

How to unit-test a graphical component? For example, how to unit-test a map or a chart in React since there is no text to select and to run tests against? Testing a graphical component

Will there be a KCD Trilogy? https://EpicWeb.dev (https://kentcdodds.com/blog/i-m-building-epicweb-dev) Will there be a KCD Trilogy? (Yes)

How do you automate KCD? How I'm So Productive #automation ScriptKit kentcdodds/.kenv How do you automate KCD?

in response to this tweet: https://twitter.com/Rovolutionary/status/1564338893691953154 Question about testing a reusable component

Why do we need full stack developer? "Your job as CEO of a startup is to hire generalists to build and then hire specialists to scale. Pretty simple." - Adam Gazdecki Full Stack Developers... Why?

I'm using Remix to create an app that displays a list of images, similar to a gallery. I am using Cloudinary for storage and Mantine for UI. Since I am using Mantine's DropZones control, it has an onDrop callback to handle dropped files, how could I direct it to Remix's ActionFunction to handle the dropped files since it's not a form, thus there's no post. Example useFetcher useSubmit Mantine's callback with Remix's ActionFunction

What arguments tend to convince engineers of how important E2E tests are in your experience? The Testing Trophy and Tearing Classifications Common Testing Mistakes How do you convince your team to use E2E?

Seeking advice on pros and cons of migration an application from React/Rails to Remix Remix Discord Remix GitHub Discussions Migration from React/Rails hybrid to Remix

I wanted to know if you had the chance to try it and some of your thoughts on it! Do you have any thoughts on Playwright?

Hi, I have a personal website and I am wondering if there's a need to add a privacy and cookie policy. I also want to know your suggestions or recommendations around cookie policy managers and privacy policy content. If I were to use a self hosted or public analytics solution like umami or google analytics, do I then need to add a privacy/cookie policy to my site or it's always required to do so especially because of GDPR. KCD Fathom Transparency Using cookie/privacy policies on personal websites

A question for Kent about spending time outside of work to learn new skills, while putting family first. How I'm So Productive Zero to Sixty in Software Development: How to Jumpstart Your Career Leveling up your career while putting family first

To live load data when using a framework like Next.JS, I sometimes use swr or react query to do so. Since I am using the loaders in remix to initially load my data, how do I live load this data with remix, do I need to use swr/react-query with perhaps an api endpoint in my remix routes or is there a better way to fetch data from my remix loaders. remix-sse-live-viewers Live loading data with remix

Do you recommend the use of VPN when developing applications or is it something that should be left to the company, if the company requires it then you use it else there's no significant need for it. Using VPN during software development

Wanted to know Kent's thoughts around the hate around React lately. Why is there so much hate regarding React lately?

Where do the red lines go when the file gets too big? todos.tsx When to break up a component into multiple components -Colocation Decomposing remix component

I was stuck being "mid" level developer from a long time and I would like to know how to become a senior developer. Jump from mid level to senior react developer

React app that uses React library and transpiling through webpack and babel. It works on chrome and Edge and not on IE 11. Remix Browser Support Remix Philosophy: Progressive Enhancement Babel present-env MDN Can I use... React app doesn't work on IE11

Hey, it's been 2 years I started using RTL instead of Enzyme and recently I read your article about it and shared on Slack and that generated a huge thread with no conclusion, that's why I've asked on Twitter and now I'm doing the same here. Thanks userEvent docs Using userEvent vs fireEvent

I was on the project with some really cool developers(ex Amazon) and I saw them using useMemo inside of the jsx, like this: So my question would be, do you think this is good practice or would you rather use React.memo for these kind of things.... Fix the slow render before you fix the re-render useMemo vs React.Memo when it comes to JSX

Do you have some thoughts you want to share about why you stopped asking for calls on https://kcd.im/calls? How to build a committed following

I am just curious if you have any good, high-quality materials I can learn from about Frontend Architecture. Fundamentals of Software Architecture: An Engineering Approach The Pragmatic Programmer: Your Journey To Mastery, 20th Anniversary Edition (2nd Edition) Learning Frontend Architecture

Any way to pass data we fetched in some parent route to children route. There are cases where routes will need a same data. For example post details to show on details page and edit modal. Also user data is almost required on all the segments Example of useMatches in the stacks Querying the data in nested routes

Nivo charts are not rendering in rtl render method. Nivo charts issue

Internationalization is an essential topic in many projects. However, as there is nothing about i18n in the official documentation, I wonder if you have any advice or best practices. remix-i18next i18n and Remix

Hi Kent! My name is Jan. I'd like to ask you: How do you write tests for accessible error messages with testing library? By accessible error messages, I mean, suppose you have a form with an input. You have a p tag which renders the error, if there is an error. And that p tag has an id. And now you pass this p tags id to the input as a value for the aria-describedby property. So far, I'm using byText to check for the existence of that error in my tests, but I was wondering whether there is a better query for that? Thank you! Custom Queries Tests for accessible error messages

Should we assert on props.onClick while writing test cases in react-testing-library?Testing Implementation DetailsAsserting props.onClick in react-testing-library

Is it a valid pattern to use CatchBoundary's on empty datasets, and is it perhaps recommended by the Remix team? Discord Thread Stack Overflow Link Status Codes 405 404 CatchBoundary on empty datasets

I'm building a new application with Remix and was curious if there were any emergent anti-patterns that you've seen appear in the community. Remix does a lot to structure the application, but sometimes it can feel like the initial structure isn't quite right or is missing some quality of life improvements. Remix Anti-patterns

Why Framer Motion for animations? Why Framer Motion for Animations

Hey Kent, when you began working as a developer, did you face issues when problem solving as in getting stuck? How did you manage to get through those? Is there anything that helped you "think better" or "think clearer" to solve issues? Lack of experience when problem solving

Which is the best way to know inside of an action function in Remix with which button a form was submitted In this example the name is "action", but again I prefer to call this "intent": https://github.com/remix-run/remix/blob/d0d500849fbd87eace23bb3d479b7c556e314109/examples/multiple-forms/app/routes/invitations.tsx#L70-L75 How to identify which button submits a form

Code review is an important practice and increases code quality as well as develops your dev team. What's your thinking process when starting to review a new pull request? Dr. Michaela Greiler Makes Code Reviews Your Team's Superpower 10 Tips for Respectful and Constructive Code Review Feedback Thinking process when reviewing code

Question about reading react sources in order to become a better programmer. Should one do this or it's not necessary at all. And if it's possible, give a clue, please, where to start to read and understand what's going on inside React library. Do you read the React source code?

Having things isolated from one another makes more sense to me since scaling the application would be easier to do. Isolate FE and BE apps vs Remix Full Stack

Understanding why its good to continue to use server sider rendering with a custom backend and adding the extra middle layer for Remix to handle

What feedback speed should we aim for in a frontend test suite? What's too slow?

How to understand what should be stored in the state and what should be derived from that state. And also how to understand there isn't need in useEffect hook. https://kentcdodds.com/blog/dont-sync-state-derive-it

What should be the order of courses that I should take?

When a user enters the tab (btw it's a SPA) I call the api in useEffect and saving the response in redux store. May I know is it better approach to call the api again and again when the user leaves and enters the page? (In this case I see a flicker of loading every time) or storing the response in redux store (UX for this screen is good but is it harming the performance overall?) or storing the response in component state? (Is there any difference b/w this and above approach performance wise?) Thanks again for this opportunity & Regards Rahimuddin

I recently joined a company where they use a lot of custom hooks for separating logics at the level of a component. When to break up a component into multiple components

Hello Kent, my name is Joshua Osagie, I'm a software developer focusing mostly on front-end dev (https://www.joshx.dev my portfolio website). I made this call because you've been a big inspiration and model in my React/JavaScript journey. I've taken some of your courses on egghead.io and recently I told my boss about your EpicReact course. I really appreciate what you're doing in the React/JS ecosystem, and I do hope you receive this recording. Thank you!

Startup says that we should be only testing on the backend, since the frontend is changing so fast, so no need to test the frontend, just a couple of integration tests.

Hey Kent! We've been using Hasura to generate CRUD APIs for our small team. Our existing web applications are all using Next.js, and consume the GraphQL API via Apollo Client and TypeScript hooks generated from the remote schema using graphql-code-generator. This workflow has saved us a lot of time, particularly in API development, and I love the generated type-safe hooks. After watching your new Remix content, we're very excited to try Remix as an alternative to Next, mostly to leverage the performance benefits and the effortless error boundaries within nested routes. Do you have some best practices for utilizing GraphQL queries in Remix loader functions? It would be great for us to continue to take advantage of code generation, if possible. Thank you so much! Links: Artem Zakharchenko GraphQL Example in the Remix Repo

I am trying to figure out my stack on the backend side of things for Remix, more specifically services that will allow my server side code to run at the edge be it the server itself or the database or both so that everyone everywhere can use my app at super fast speeds. There are not a lot of resources out there about the best services out there that do this and I am wondering if you have any suggestions where I can begin to look for such services

I love your website! ITS BEAUTIFUL.

I would really prefer to use magic links for authentication rather than username/password. However, I'm running into an issue where several of our clients share a single account login which means many people logging in don't have access to the email inbox. We already don't charge per user, but have you come across this situation before? Any tips on how we can incentivize users to use individual accounts?

I have a question... could the useState be used without using the setter? because a teammate use it in that way to get an item from sessionStorage const [initialScrollPosition] = useState(() => Number.parseFloat(sessionStorage.getItem('offset') || 0)); and argues that this is so that the component is not unnecessarily rerendered and to read the sessionStorage only once! 🤔 but I think we can use useMemo for those cases but the useState is still used in this form in several components. useState lazy initialization and function updates

This is a question about: Improve the Performance of your React Forms In the example, submitting the form successfully will still retain the current values of the fields. I want the behavior such that" when the server response says the form is NOT submitted successfully, then the form field will have the current values that has been inputted by the user But when the server response says that the form is successfully submitted, then the form fields will be blank again. What's do you think is the best and most performant (and readable) code to approach this in pure React? The approach which will reduce the amount of unnecessary rerenders of the fields? Thank you! Updated code sandbox

So this short call is about when to use which advanced react pattern to create re-usable components. Like are there any indications or things that make you think about why one approach is better than the other.

Your thoughts on staying positive and patient with unfriendly co-workers and/or leadership, and how to handle when they are disrespectful towards you.

There are many applications that consist mostly of a single page. Will we get any benefit if we use frameworks like Remix or Next.js for these?

I am using testing library to test my React app and one of my tests leaks or somehow affecting and causing another one to fail if they are in the same file. They work just fine in separate files. What can be the reason for this?

How did you approach versioning and dependency management when you were building this reusable component library at PayPal? I would like to know 1. How did you go about introducing breaking changes? 2. How did you make sure that people are using the latest version of your library or it doesn’t matter if they are using the same version? What’s bad about having different teams using different versions of the same library?

I have a question with regards to building out a minimum viable product. I am comparing using a full stack framework like django, that includes authentication and arm’s and routing and all the batteries builtin, versus creating a react app with all the backend farmed out to saas offering like auth0 for auth and the millions of sql/nosql/graphql. With django approach, you have simple dynamic pages with server side generation and when you’re ready you can separate out the frontend to something built with react, import django rest framework and have your backend api ready to go With the saas approach you can just focus on the front-end and scale as much as you want. And then build your own custom services to reduce costs when you’re ready. But you have to deal with integrating all those saas services to your application. Remix Docs

Hello Kent, I learnt software development in a self-taught path and I really didn't do a good job (Now I know) because when I hear words like Serverless and others, I don't have the first clue what they are talking about. In summary, I'm clueless about a lot of things and I need help.

Your thoughts on Alfred and ScriptKit.

We're observing a lot of feedback about React and started to think "why". Why not Svetle or Vue? Why not something else. And it's also inspired by what you have put on the epicreact.dev landing page about why React is awesome. One of the good examples for more context please read: https://dev.to/jfbrennan/really-why-react-5958 Why I Love React The Beginner's Guide to React

If useState contains a simple value like string or int, setting a new value that is the same as the existing value will not cause the component to re-render. However, if useState contains an object and I update the state with a new object that contains the exact same values, it will trigger the component to re-render. The React documentation says that is used Object.is to compare values. My 2 objects are identical, so why does the re-render happen? useState lazy initialization and function updates

Trying to figure out whether a CSS in JS approach will take a significance performance hit when using Remix, and whether it would be better to stick to remote and plain stylesheets. Also wondering whether Remix has any Babel-like class naming structure, or if there might be support for Babel in the future. Why Remix over other React frameworks? How Remix makes CSS clashes predictable

As web developers, we come across a lot of topics and want to build a solid foundation on them. We also need to know what to focus on at certain stages in our journey. Deciding What Not To Learn How to get started with programming Dealing with FOMO How to get experience as a software engineer How to React ⚛️

Can I test drag and drop with React Testing library?

Hey Kent,Thanks for the chance to ask you a question. This is about protected route and 3rd party payment flow, ending in a re-direct back to my website. The user would need to re-login again. How to avoid that? Super Simple Start to Remix Stop using client-side route redirects

As a designer/developer on a new team, where I'm also the most experienced, but haven't been given the path to recommending change wherever necessary. In other words, I was brought on to be an individual contributor, not specifically a consultant, although it's very obvious in many places that the app lacked a designer, and that the code lacked senior developers. For context, they don't do JavaScript testing because "the team was new when we started and we wanted them to get off and running." So the question is how one can implement change, and be a useful consultant to make the product better for the user, but do so diplomatically. Or does one just do one's job and not make suggestions? Business and Engineering alignment

We are looking to build an open source website for students of our organization in college. What are some tips that can help with the building and management of such a project.

We use RTL at work and I also use it for personal project. I understand what RTL is and what it isn't. My question is what are you using alongside RTL in terms of frontend testing? At work I'm pondering implementing Visual Regression testing on a large React application to cover things like unwanted CSS changes, but am also afraid of the overhead. Also, have you found any times that unit testing > RTL? Chromatic Storybook Percy.io Applitools The Testing Trophy and Testing Classifications

I wonder if you have any thoughts about creating web components in React.

When relying solely on passwordless magic links for signing users in to your application, you make the timely delivery of these links to people's inboxes a critical dependency for using your app. Though unlikely, it's not impossible that a mail service provider experiences an outage blocking your users for logging in. Less dramatic, but equally likely, your application might get throttled which could cause these login emails to arrive after the included links have already expired. What are your thoughts on this?

I wonder how you created the design for kentcdodds.com.It would be great if some resources or tips are shared. Design for Developers by Sarah Drasner Refactoring UI by Adam Wathan and Steve Schoger

How should I think about pricing a workshop when demand for it is low? I enjoy the topic so I'm happy to teach it, and I want to be paid fairly for my time, but I don't expect to get much re-sale value out of it.

I see you use XState on your new website. Why and how do you use it? Are there any best practices and pitfalls? Implementing a simple state machine library in JavaScript

What do you use for dealing with forms in React? Improve the Performance of your React Forms

I was wondering how to decide when the html is too trivial to turn into a component. For example turning msg into a component. Maybe it's useful for styled components? Thanks When to break up a component into multiple components

Finding out more about the best places to use Fly.io's request replays, when to use it and when not to use it. How I built a modern website in 2021

In the "Fix perf death by a thousand cuts" exercise in the Epic React Performance workshop, extra credit 3 "write an HOC to get a slice of app state": why is forwarding the ref in the HOC required to actually prevent all the Cells from re-rendering? 06.extra-3.js Production deploy of that example

Your website currently uses magic links to sign in users. This seems to be a completely secure method of authentication, yet is still quite uncommon compared to the traditional username + password combo's. Why do you think that is? If it's just as secure, or perhaps more secure, how can we improve adoption of this method? How I built a modern website in 2021 (I've got a section in here that describes the auth flow)

I need some tips to write a course and suggestions to choose the app idea, decompose it into lessons, things to focus on, deploy the app and writing tests. Taylor Bell Chats About Effective Teaching How I Teach

What brings you to Remix over other React frameworks like Next and Gatsby? Remix is going open source soon so I'd love to pad my excitement even further with knowing truly what it brings over its competitors. How I Built a Modern Website in 2021 (blog post) How I Built a Modern Website in 2021 (slides) Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris

I'd like to learn more about paypal-scripts. What tasks did the package cover: linting, transpiling, CI, deploy, etc. Please share any advice you can about starting a similar toolkit. Tools without config Concerning Toolkits

Cam asks Kent his thoughts on the uprising JS framework, Svelte. Remix

I wonder how you created those architecture diagrams with that hand drawn feel to them. How I built a modern website in 2021 Excalidraw

I come from non-CS background, MIS. Since you also come from a non-CS background, did you find that you needed to fill in any holes in your knowledge to get to where you are today?

Epic React has been on my radar ever since you started teasing it on Twitter. To me it feels like a "must have" that I "can't have". Obviously, it has a pretty hefty price tag, which I'm sure it more than warrants. But because of that price tag, it becomes unaffordable to me personally, and with my workplace being quite small, they're not always as forthcoming as I'd hope when it comes to paying for something like this either. I was wondering if you've ever considered adding payment options to your courses to make them more affordable in the short term, allowing people like me to pay over several months, potentially via a service similar to ClearPay or Klarna, or whatever else is out there! I'm sure there are more intricacies to something like this, but would love to hear your thoughts! Thanks! EpicReact.dev Credits

Which of the approaches you have talked about (prop getters & compound components) is best for building UI-free components? Inspired by this thread. P.S. I think you should definitely rename prop getters to the IKEA pattern. downshift How to give rendering control to users with prop getters

Libraries comparison: pros and cons of cypress Component Testing Library vs RTL Cypress Testing Library

That’s a follow-up question to Call Kent Podcast 09 “How to style?" Did you mention on "Call Kent Podcast 09 - How to style?" the remix capability to get the link tags removed from the page when the route is no longer active and with that, the styles could get removed as well, helping to avoid CSS clashes. How does Remix manage situations where the page that is active has multiple components, and those components are using different CSS files and potentially changing the same selector style (both could be changing the p tag)? Or even if the page itself is using multiple CSS files? How does remix manage situations where it needs to handle multiple CSS files that need to be used on the page that is active and it still needs to avoid clashes? Thanks for answering, Kent!

Want to see what would be your opinions regarding MirageJs and if it could be a potential replacement of MSW.

There's no doubt that Kent C. Dodds is a top teacher on the web helping people write quality software. What does the work life balance look like for someone at this level? How can one continuously be on top of the latest changes on the web, while maintaining that work life balance.

Coming up with a huge precedence from testingjavascript people can tend to come up with unfair expectations for other content such as "Epic React", I would love to hear your thoughts on what to expect from your content while looking for seniority levels The Coding Career Handbook How to get experience as a software engineer

Question about documentation / tests / naming convention as an important software engineer skill

Nowadays, we have a bunch of approaches that we can take to style our applications, like: pure CSS, pre-processors, CSS Modules, utilities, component UI’s, CSS in JS and for some of them, we have another bunch of libraries that we can choose as well. Sometimes we can get lost in the middle of them trying to find the better one for our needs. What do you take into consideration when choosing an approach to style? Do you think that some use cases fit better in one approach than in another? Is there a particular approach that you believe is ahead of the rest? Or do you prefer? So, how to style?

Why do you think there’s still so much hype around JamStack and SSG, when form submissions and server redirects for data mutations tend to work better a lot of the time? There’s not a lot of ecosystem interest (outside of Remix) to lean on this baked-in superpower of the web, and I find that interesting. This is less about the tech, and more about the psychology in the JS ecosystem. Maybe it’s a funding or marketing thing?next-runtime

I’ve been feeling burned out lately and wanted to hear how do you deal with it. Boundaries, Updated and Expanded Edition: When to Say Yes, How to Say No to Take Control of Your Life Self-Compassion: The Proven Power of Being Kind to Yourself

In the book Make it Stick: The Science of Successful Learning. They suggest that for mastery of a subject you should be using interleave curves. The analogy given in the book to explain that is while practicing baseball you should be switching between straight and curveballs instead of doing just one or the other. What does that look like in practice while studying a topic? 

As a self taught dev who is looking to get their first job in the industry, how do you think the best way to balance this course and personal projects is? What do you think is the best use of my time as a developer to not only gain the most from this course, but also show off and apply the knowledge. How to get experience as a software engineer Solidifying what you learn

Asking Kent for insight into how he finds new technologies to use for his projects.Zero to 60 in Software Development: How to Jumpstart Your Career - Forward 4 Web Summit

What’s the difference between `screen.getByText` and `const { getByText } = render()`More generically - what’s the difference between methods originating from these different objectsCommon mistakes with React Testing Library - Not Using Screen

So I have a MainComponent, inside there are some “remote” components like OfficeSelect, that fetches data asynchronously on mount, using axios, everytime I test MainComponent I get the “act” warning on that OfficeSelect fetch, how do I deal with that?Fix the “not wrapped in act(…)” warning

bit.dev is one option I’ve considered, but I’m curious what you would do.