Hi Friends, 👋 I'm Kent C. Dodds Full Time Educator AMA

Hey kent :wave:
I got a few questions.

How to get deep understanding of how react works? A lot of times i end up thinking its just magic, without feeling confident at all.

If you have to optimize react app, where do you start?

Thanks.

Hi Kent, what is the best way to improve SEO in an existing big react project? 100,000s lines of code. At the moment I’m working on AWS Lambda@Edge which generates HTML for crawlers but that’s not ideal. Rewrite to Next is too expensive. Any idea? Thanks!

BTW: tried react-snap and React-static but neither worked.

Hi @maxcell.wilson,

A huge part of improving testing culture is making it easier to contribute to tests. So long as you’re existing test setup is complicated people will avoid it. And it’s made an even less attractive use of your time if the value you get out of tests are low (which is what you’ll find using tools like enzyme).

Avoiding testing implementation details is really important for that second point.

You can definitely incrementally migrate to React Testing Library (and better testing practices). You can use them both in the same project (and even in the same file). I think it’s worth the cost of having two testing libraries temporarily. I’ve found that it doesn’t take long before people catch the testing bug (bad metaphor?) and start actually writing tests for new stuff and replacing tests for old stuff.

Good luck!

2 Likes

Hey @joel,

This was my biggest concern when I decided to go full-time educator. I was worried that I would lose touch with what it’s like to work on a real product.

In the last year, I’ve learned a few things:

  1. Yes, I don’t work on a team anymore, so I don’t know what it’s like to work on a product team in 2020
  2. No, I haven’t somehow forgotten what it was like to ship an app with a team to millions of people all over the world.
  3. I’m coding just as much as I was when I was at PayPal. I’m still working on open source libraries and apps which gives me exposure to new problems, as well as my instruction material and demos.
  4. I’ve got my ear to the ground (almost forced to the ground honestly) by all the questions people ask me. I know the problems people are facing because they’re bringing me all of their biggest challenges and asking me what to do about it. I don’t always know the answer, but it gives me direction in the kinds of things I research and tinker with.

So it’s been surprisingly easy to keep up with what’s going on in the ecosystem and keep myself sharp as a coder.

2 Likes

@kentcdodds I’m working on a project which uses ES5 JS AMD modules . Planning to write abstraction layer for the CRUD API calls. Any suggestion would of great help!
Below is the API written in AMD module to get, create, update customer. since table name field names are in string its error-prone and there is no strong typing, also have to send data in same sequence.
Any suggestion on how to write abstraction layer to this api to accept filed names and field values with strong types so this can be made as generic module.

define(["record", "search"], function(record, search) {
    function getCustomer(customerId){
        var query = search.create({
            type: "<<customer_table_name>>",
            filters: [["customerId", "is", customerId], "AND", ["isActive", "is", true]],
            columns: ["customerId", "customer_first_name", "customer_last_name"]
        });
        var customers = [];
        query.execute(function(customer){
            customers.push(customer);
        });
        return customers;
    }

    function createCustomer(customerAttributes)
        var customer = record.create({
        type: "<<customer_table_name>>"
        });
        customer.setValue("customer_first_name", customerAttributes[0]);
        customer.setValue("customer_last_name" , customerAttributes[1]);
        //other fileds of customers to create...
        customer.save();
    }

Hi @zain.fathoni,

I’ve only ever done “Hello World” in Reason and I’m really impressed by it. I have a feeling that Reason will remain fringe (as cool it is). I definitely feel like anyone would be well served to learn it though.

Good luck!

1 Like

Hi @pgbluster,

Before the virus, my wife and I would go walking every morning at the Rec center. Now… Not so much. I do like to go OneWheel riding (“floating”) and while that doesn’t seem like a workout, it actually is!

During the day I take breaks and stretch so I don’t end the day stiff.

Also… I have 4 small children… And they give me lots of physical exercise :slight_smile:

1 Like

Hi Kent,

Will you continue to offer your remote workshops after you launch Epic React? Also, do you have a schedule for your remote workshops that we can look at ahead of time? I may not be able to attend this time around for a couple of workshops I’m interested (Build ReactJS Applications), but wondering if and when they will be offered again within this year.

Thanks!

2 Likes

Hi @mahaveersharma0496,

Actually, my recently relaunched Beginner’s Guide to ReactJS should give you some insight into how React works. There’s also a lot of material out there to learn more of the inner workings of React. Google around. There have been several talks and articles about this subject.

As for optimizing a React app, I start with profiling tools from Chrome DevTools and React DevTools. They’re remarkably great at helping me identify issues in my app. Check this out: https://kentcdodds.com/blog/profile-a-react-app-for-performance

Good luck!

Hi Kent!

What do you think should be the next steps for someone that knows the basics of React? Specifically, making the leap from beginner React to knowing it well enough to be useful in enterprise/B2B applications seems unclear to me. Like, what separates an intermediate React dev from an advanced one? I want to understand best practices, architectural principles, etc. but am unsure of where to start.

Thanks!

Hi @astrumq,

I’m guessing you’re talking about a React app that’s all client-side? First, remember that you only need to make it SEO friendly for public pages. Content that’s behind a login screen will not be indexed by Google in any meaningful way anyway.

Outside of using SSR (Server-Side Rendered) tools (like Next.js) or SSG (Server-Side Generated) tools (like Gatsby), (or building your own simpler versions of those tools) I’m not sure what else you can do. Sorry!

Hi @jin,

I might offer the remote workshops if there’s high demand for them. But once EpicReact.Dev is launched, I don’t really see much of a reason. Epic React will be much better value for the money (it really is going to be incredible). I also have some great plans of things I want to work on once I finish with Epic React! Look forward to the future!

1 Like

Hi @bvmanjunathrao,

Without understanding your codebase and constraints better, I’m afraid it’s hard for me to give any advice here. But maybe looking through an example project will be helpful. Take a look at this: https://github.com/kentcdodds/bookshelf

Hi @pmishraworld,

Avoid course/tutorial purgatory. You can spend weeks pouring over courses and never make any progress on your experience. Experience comes from having experiences which comes from facing and fixing problems. I’ve written about this here: https://kentcdodds.com/blog/how-to-get-experience-as-a-software-engineer

So start building stuff. Occasionally you’ll hit your limit and you can go get targeted learning material to help you answer your questions. This is how you “bring your why”.

2 Likes

Hi Kent,
I’m wondering if our React app has reached a point where we need Redux. Right now it’s all using Context.
Basically our main users can switch:

  • user type (this impacts half our components)
  • user id (administrator feature, this touches virtually all our components)
  • location (impacts around a third of our components)

There are other things too, which impact a significant portion of our application. Our contexts used to be co-located, but we’ve had to move more and more to a global app context given all the components they affect.

Have we reached the point of Redux? (Or other optimized global state management library )

Hey Kent,

A lot of your material is geared towards React on Web. Things that apply to web don’t necessarily apply to React Native. The routing layer behaves differently then React Router. Re render’s are incredibly expensive, especially when dealing lower-end devices. Things you can get away with on web you can’t with React Native. Do you have any future plans doing a deeper dive in to React Native?

Hey Kent :wave:

I have recently seen Michael Jackson’s talk on Composition in React to avoid Prop Drilling

What are your thoughts, pros and cons of using Composition vs Context API to avoid prop drilling?

1 Like

Hi @basket57,

The number of components that are consuming a context value is only one part of the picture. I’m guessing you’re concerned about performance. I would recommend measuring and determining whether performance is actually an issue or if it’s just something you think might be an issue.

If it really is an issue, then there are several optimizations you can make before you reach for an abstraction like redux. I talk about several of these in my React Performance workshop (which will end up on EpicReact.Dev later this year).

If you really do want to bring in an abstraction and not worry about performance, then go for it. Just make sure to not just shove everything into redux or you’ll still have performance problems. I also hear wonderful things about MobX. From what I understand of their implementation, they don’t really have performance problems FULL STOP.

In any case, keep state colocated (remember, some state only makes sense in a global context and in that case that’s still consistent with colocation). Performance is only one part of the picture here, maintenance has a lot to do with state management as well.

Good luck!

Hi @pelagicdev,

I’ve only done hello world in React Native, and I don’t have any plans to do more than that in the future. I’ve intentionally determined to focus my efforts on web. I’m happy when what I teach cross-applies, but that’s always incidental.

Hi @raghubandaru45, I LOVE this and strongly advise it.

I think composition can help you avoid a lot of use cases for the context API which is a good thing. This doesn’t mean it’s exclusive to the context API. I don’t think that most apps could “just use composition” and never have to use the context API. So I’d suggest using both.

1 Like