Neil Doshi

Yeah. So I am a front end heavy full stack dev. In a sense, I have have had more than 6 5 to 6 years of experience doing front end development. And in that particular period, I have worked more around React JS and a lot of complimentary libraries and stuff around React JS, like Redux, Flux, uh, various UI libraries, like material UI, deal and CSS. And then yeah. So that's mostly under the UI side of things, which I've done. I have a very good amount of experience creating or writing some on the back end in Node. Js. Recently, a bit of stuff in next, uh, in a Nest. Js. But on the front end stuff, I have worked on, uh, Next. Js around service agenda, service generation. Uh, and then on the API side, I've worked on GraphQL. I've worked on REST. GraphQL wise, I have written GraphQL, uh, mutations, queries. Uh, on the DB side, I have written certain I have done a bit of work with Postgres and MySQL, also a bit of work with MongoDB. Uh, and yeah. So in general, I'm a front end heavy person, so I've done a lot lot more work in front end. JavaScript is my core strength. And, uh, so that's why I'm more towards the front end side of things.

Okay. Um, strategy to I don't mind. I missed the previous question. Uh, Yeah. React memo stuff using hooks such as uh, use callback, use memo, removing unrequired props from the component, having certain default values to the component props, separation of concerns in the sense having anything which is not related to the component, not written in the component but in a separate file or, uh, separate place, uh, making API calls separate from the component renders, uh, creating custom hooks for them separately. These are multiple ways in which I can sort of reduce the number of renders. React.memo is something which we used to do earlier. So these are the multiple ways where we can reduce the number of re renders.

Security of data in front end applications. Right. So you need to have multiple validations in place. All the fields, all the forms, they need to be validated. If it's highly crucial data, make sure that you have your data going as, uh, encrypted as p 64 passing through the API, uh, so that you can immediately open it in your console and check the data. Uh, you also need to sorry. So, uh, you also need to make sure that not all the components have all the data. So, for example, using the context API, making sure that not multiple only the required data is visible to the component, and none of the other data is visible to the same component. Right? Uh, not storing everything in the local storage, not putting everything in the session storage, only the needed data needs to be go then. Cookies need to be encrypted. No, uh, apart from any privacy data or confidential data, it should not be in the cookies. Basic field validations, as said, uh, empty APIs need to be under so, yeah, so API calls need to be with the authentications from the UI so that no unrequired access is not there through the UI. Uh, protected routes need to be behind. Right? So there has to be a protected route so that you cannot easily access them apart from our unless validations in place, so you can make sure that happens with the AI crowded on. These are multiple ways in which you can make sure that the security of data in the UI. Yeah.

Because of creating a response and react using CSS 3 media queries. Yeah. So, uh, essentially, the media queries, we have small, extra small, medium, and large. For the larger, uh, larger places, your nav bar can be full, and you can have all the options in the of your nav bar listed in the horizontal manner as the media as the width decreases. And so you put a media query checking for the medium size. So then immediately, you would basically hide the, uh, horizontal nav bar, and then you would have a button for the side drawer which would pop up, which would basically be visible once that particular, uh, media once that particular media query is hit. And as it reduces, you will also adjust the font sizes. You will also adjust the alignment accordingly so that the nav bar is responsive and that you do not they does not look shabby or incorrect in whatever size and format you are seeing it.

You describe how you might implement lazy loading in React apps? Uh, so lazy loading in React apps, you could basically use suspense. You could use error boundaries. And so that once you have stuff in suspense, it would load up. Uh, I could understand that this is, uh, not immediately required. And then while packaging the stuff or while creating the build, it would basically chunk the JS so that it can be loaded up, uh, automatically later on as required.

Following records, if there is an issue with the way the set state is being used with the set time out, can you describe what is the issue and set this possible solution? My component because the old format, this dot counter is 0. Okay. There's a state variable. Set time. I want this dot state counter this dot state counter plus 1,000. And we're done. This is a sheet counter. Can you describe what is the issue issue is and suggest a possible solution? This is the set state plus 1. Yeah. So when you're saying this dot set state, uh, so first of all, react batches all set all state changes into 1. So, yeah, that might be a problem. Also, when you're trying to invoke when you're trying to use this state object in the set state, you would probably want to add a callback instead of directly writing plus 1 because that would not render correctly or that would not, uh, update the counter counter variable correctly, uh, immediately. So, 1, you would since it, uh, batches, you would want to pass in a callback that would basically take the previous state and then return a next state as a function in the set state set state oh, hook.

Review the React components, Navette, what do you believe is the purpose of the user user hook in the context, and what bug might we find in the reducer function? Reduce action type increment, decrement, default, increment count state plus action plus payload, action dot payload, action minus payload, count as 0, send this as part of its initial state. So passing a status state and action. What do you believe is the purpose of the user reducer hook in this context, and what bug might you find in the reducer function provided? And there's a reducer function provided you have action dot type, which is increment decrement default through new error. Okay. Uh, count as an issue 0 action dot payload. So you are the user as a function is basically sort of it's trying to basically set, uh, sort of expose a way to mutate the counter variable, initial state counter variable. Right? And you can either increment, decrement. The only difference is the increment and decrement will be random because it will be basis the payload that you pass to the action. And so, yeah, so the payload is that one thing. Okay. Wait. Uh, state slash initial state is count to 0. Okay. So you okay. Dispatch. So okay. So so in the payload, you will be passing, yeah, uh, the payload needs to be a number to make sure that it works correctly. This is basically to increment decrement. However, there is no specific step size for increment decrement. These are couple of things which might be required to be fixed. And, yeah, the this is basically to update the state, either add or reduce the state's state value of the counter in the state, which is there in the state.

Design critical and the parts in React. Critical rendering parts in React applications, uh, your approach to optimizing critical rendering parts. What are critical rendering parts? Okay. So make sure that you do not have your relying on the same funders of our earlier questions of how would you reduce the renders. You would only make make sure that you're using React memo. Uh, make sure you're using use memo for any heavy calculations that would be dependent on any parameters, any props, or any states. Uh, make sure that you are whenever you are updating a state, make sure that you're only updating a particular there's a at least a shallow compare before, um, uh, if you're having a huge state to manage. Make sure that there is a proper comparison. Make sure that the API calls do not trigger rerenders of the app unnecessary rerenders of the, uh, components, um, so as so as to deal with the experience. Critical rendering parts, making sure that the application pagination of data. If you have huge amount of data to be loaded, make sure that you're paginated or, uh, you have some socket sort of thing set up in case you want to consume continuously stream data so that the render time and page experience is better. Uh, make sure that make sure that the CSS is make sure that the CSS implementation is correct in place. There's no there's no incorrect pixelate. So there's no there's no incorrect styling in place or incorrect, uh, spacing in place, making the page unusable. Uh, Yeah. Make sure there is a make sure to have a default state if the API fails, and there is a fallback state in the if the API fails and the users probably intimated accordingly, making sure that if there any, uh, if any value needs to be saved or updated, there's a proper alert for the user so that the renders are correct in that place. Yeah.

What's an opportunity for international address applications? We have I 18 package. Yeah. So we had so there's already in 1 I 18 n package where we can supply multiple translations of the strings. Instead of hard coding the text values into the strings, we could use these translations so that when the, uh, set us default state to English and probably pass in a uh, so there we have a parameter which you can wire into your UI and then probably you want to drop down and select the language. So our 18 packet will automatically select the correct language and show it to the user on the, uh, on the UI in the respective language.

How would you and I guess in the app, like, how incremental migration to TypeScript. Oh, okay. For incremental migration to TypeScript, we would have to we would have to sort of get started with the the base types that needs needs to be added to the application. And each component needs to So starting from the atomic components, uh, and then so if if so, basically, starting from the base design components where we make sure that all the types of scripts are there because, uh, they are being multiple used in multiple places. So that is the place that I would start. Also, importing the required type no types for the packages that are being used. For example, the date package or probably a styling package that you might be having used or probably some component package that you use, uh, multiple of those are currently having their types in place, and they're probably available on NPM. So probably importing those and then so that that makes things easier. That's 1. 2, starting from the base components of the atomic components, that's the place that I would probably start to update the components with the, uh, TypeScript. It's a good thing, uh, probably, it's a good it would be a good thing to have a storybook in place, storybook implementation in place so that we could test stuff, uh, even before I start using it into the actual applications. We could do a parallel activity, and this would not hinder the current application development. And once we are in a stable state of those, we could start slowly, uh, slowly slowly start migrating those to the so starting from the base pair components, then going to one level of HOCs, higher order components, and so and so forth till we have where we hit critical mass that we can start moving all these components into the actual application usage. That would be the uh, approach where you start from importing the required component types or the library types that your dependencies are, uh, types for the libraries that you're being dependent on, 2, implementing a storybook and then implementing, uh, the TypeScript, uh, conversion into those. And then 3, 1 by 1, replacing the components of those or replacing the actual JavaScript components with the TypeScript components. This goes without without saying that we also set up the TypeScript, uh, config and then also enable JS and it temporarily until and unless we are completely tie moved to TypeScript.