Trishna Kashyap

Okay. Could you help me understand more about your background without giving a brief introduction for yourself? Okay. So I'm Krishna, and I have done my, uh, graduation in bachelor's of elementary education. And I shifted from elementary education to IT because I didn't find teaching relatable. So in 2020 in 2020, actually, I started learning from basics. So I started learning HTML, CSS, and JavaScript and got my first internship. Within that internship, I learned, uh, few technical skills like React JS, Next JS, uh, TypeScript. And then later, I switched on to, um, a full time job in another company, and then my, uh, skill set grew. Currently, I have a total experience of about 3.2 years including my internship, and, um, that's it.

How can React's context API be leveraged to avoid drop drilling in large applications? Okay. So, uh, context APIs work like, um, reducts only. So you can store your data in context and access it anywhere in the child components. So either you can update the, uh, context in child components and access it in parent or update it in parent components and it in child. So you don't have to pass it through component to component, and it's accessible globally.

Lazy loading components in React to improve the initial load time. So, um, there's dynamic imports, uh, in Next. Js. Okay. It's not in React. Js. Yeah. Lazy loading in React. I think there are some libraries that support lazy loading on React applications. We can, uh, go through that and implement those in our application to improve the performance overall performance of the application and also load the, uh, required files only when they are required on the page and not initially when the page is loading.

For ensuring that a React application's CSS styles do not conflict with global styles. Uh, so one thing we can do is, uh, we can call we can create particular files for particular components or for particular module modules and call them, uh, like, import them only in that particular modules. So for example, um, there's a common component of sidebar and common component of navbar. So that is used to that is supposed to be used in the entire application. But, uh, if there is a component for dashboard, so we can, um, like, import the CSS for the dashboard only in the dashboard component. And, uh, we'll call it in the dashboard file only, uh, not in the app dot JS file. So it will not cause any, uh, conflict with the global synthesis.

Strategy to maintain to manage state in large scale React applications without Redux. So we have context also. So React has, uh, its own Redux state own state management, uh, so we can use use context. We can create context and store the values in it, keep updating it according to, um, yeah, according to our needs. It is a belief that, uh, context use context is better for a small scale application, uh, and, uh, for a large scale application, we should go with Redux. But, uh, we can, uh, like, manage it with the use reducer hook also and with use context hook also. I think it works pretty great together.

Approach to managing global state in a React application without using an external state management library. Okay. So reducts is an external state management library. So, again, use reduct use context is one way to manage global states. Uh, otherwise, user reducer is also, um, uh, hook, uh, that React provides where you can manage complex states and update it, uh, accordingly. You can, uh, write actions for that also.

The React component is attempting to fetch data from an API, identify any anti patterns or issues in this code snippet and explain how they could be rectified. Anti patterns or issues. Okay. So test dot state, component did mount, fetch, then JSON, then test that state, set state, user data as data, and loading is false. Cache error is. Render is state dot loading true and return. Loading otherwise, list dot user data dot name. Anti patterns or issues in the code? Issues. So if you're trying to return this dot state dot user data dot name inside curly braces, uh, it might give an issue because we're rendering, we need to return a JSX element. So I think we can pass that inside a div or a h one, h two tag, and then it will run fine. Otherwise, I don't see any issues in the calling of the API. Just that.

Based on the following react function component code snippet, please identify and explain the issue with the way set counter is being used inside the set time out. Counters and set time out. Set counter counter plus 1,000. So set time out is it was 0 after okay. After every one second. So once the useEffect will run, uh, the set time out function will go into the the queue, which is to be updated after after one second, basically. And, uh, after one second, when it'll run, it will set counter to 0 plus 1. And I think, uh, the counter will not increase, uh, because it will keep adding on to the the queue, basically, which is supposed the set time out is added to a queue which is, uh, the all the functions where which are supposed to be executed once the initial loading in or the set time out thing is done. The trial interval is completed. So, uh, it won't update to it won't update more than 1, I think. It will just stay to 1. I think first time, it will be 1. Then return on the Yeah. I think we can create a variable and then update that, like, local variable inside the user effect. Update that variable in the set time out and then later set counter. Yeah. Later set counter to that variable. Yeah. I think

How you would implement the feature in React to handle continuous form validation as user inputs data? So, uh, we have, uh, refs. So we can use the user ref hook. So we can create different reps for every input field. And if there is an and trigger a function on, say, on blood, So if, uh, the focus loses, uh, the input, then we can run a validation checking the values. And if it is not matching with what we, uh, require it to be, If it does not validate, then we can throw, uh, error then and there. Yeah. User refs can be used for this.

Would you use to automate the manual testing of the app components? Okay. So we have, uh, this techniques. Not really sure about manual testing techniques. We I've just, uh, dealt with unit testing where we test the entire application. And or we can also write test cases and run those if the desired output is there, then that's how we can test. Other than that, I'm not sure of any techniques.

How have you used Ajax in conjunction with React to optimize user experience? Um, I haven't used Ajax. I mostly prefer Axios. I have used Ajax with the basic code JavaScript when I used to work with HTML, CSS, and core JS, vanilla JS. So, um, I'm not sure how, uh, AJAX would optimize user experience. I will definitely try to learn more about that. For now, I am only aware of Axios, And I think Axios and Ajax, um, work in a similar way. They have a similar, um, idea. So that's it.