The Call Kent Podcast

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 segmentsExample of useMatches in the stacksQuerying 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-i18nexti18n 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 ThreadStack Overflow LinkStatus Codes405404CatchBoundary 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 submittedIn 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-L75How 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 Superpower10 Tips for Respectful and Constructive Code Review FeedbackThinking 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 ZakharchenkoGraphQL 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 sessionStorageconst [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 FormsIn 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 userBut 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 RemixStop 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