The Call Kent Podcast

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 2019Myths about useEffectWhen to useMemo and useCallbackEpicReact.devWhat 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?PlaywrightPlaywright DiscussionsPlaywright DiscordPlaywright 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-scriptsgenerator-kcd-ossTips 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 FrostWhat'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_parseMultipartFormDataBrowser File APIs3 exampleCloudinary exampleHow 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 decisionsThe "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 CSSLatest 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 middlewareMiddleware 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 PlaygroundThe Accessibility paneThanks 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 libraryMSWTesting 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?RemixFrontend 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 TestingTest 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 TweetKent's AMA answerorganizing 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 QuestionWould 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.ThanksRemix: 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 #automationScriptKitkentcdodds/.kenvHow do you automate KCD?

in response to this tweet: https://twitter.com/Rovolutionary/status/1564338893691953154Question 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 GazdeckiFull 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.ExampleuseFetcheruseSubmitMantine'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 ClassificationsCommon Testing MistakesHow do you convince your team to use E2E?

Seeking advice on pros and cons of migration an application from React/Rails to RemixRemix DiscordRemix GitHub DiscussionsMigration 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 FathomTransparencyUsing 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 ProductiveZero to Sixty in Software Development: How to Jumpstart Your CareerLeveling 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-viewersLive 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.tsxWhen to break up a component into multiple components -ColocationDecomposing 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 SupportRemix Philosophy: Progressive EnhancementBabel present-envMDNCan 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. ThanksuserEvent docsUsing 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-renderuseMemo 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 ApproachThe Pragmatic Programmer: Your Journey To Mastery, 20th Anniversary Edition (2nd Edition)Learning Frontend Architecture