Trishna Kashyap

I'm Krishna, and I have a degree in Bachelor's of Elementary Education. I shifted from elementary education to IT because I didn't find teaching relatable. So, in 2020, I started learning from basics. I began learning HTML, CSS, and JavaScript and got my first internship. Within that internship, I learned a few technical skills like React JS, Next JS, and TypeScript. Then, I switched to a full-time job in another company, and my skill set grew. Currently, I have a total experience of about 3.2 years, including my internship.

React's context API can be leveraged to avoid prop drilling in large applications. Context APIs work like reducers only. So you can store your data in context and access it anywhere in child components. So either you can update the context in child components and access it in parent or update it in parent components and access 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, there's dynamic imports in Next.js. Okay. It's not in React.js. Lazy loading in React. I think there are some libraries that support lazy loading on React applications. We can go through that and implement those in our application to improve the overall performance of the application and also load the 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, one thing we can do is create particular files for particular components or modules and call them, like, import them only in that particular module. So for example, there's a common component of sidebar and a common component of navbar, which is used in the entire application. But if there is a component for dashboard, we can import the CSS for the dashboard only in the dashboard component. And we'll call it in the dashboard file only, not in the app.js file. So it will not cause any conflict with the global styles.

Strategy to maintain state in large scale React applications without Redux is to use React's built-in state management features, specifically the Context API. We can create context and store the values in it, keeping it updated according to our needs. It's a common belief that Context API is better suited for small-scale applications, and for large-scale applications, Redux is often preferred. However, we can also manage state effectively using the useReducer hook in conjunction with the useContext hook, and they can work together quite well.

Approach to managing global state in a React application without using an external state management library. Okay, so Redux is an external state management library. So, again, use context is one way to manage global states. Otherwise, user reducer is also a hook that React provides where you can manage complex states and update them accordingly. You can 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, 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.

So once the useEffect will run, the set time out function will go into the queue, which is to be updated after one second, basically. And after one second, when it'll run, it will set counter to 0 plus 1. And I think the counter will not increase because it will keep adding to the queue, basically, which is supposed to be the set time out is added to a queue which is all the functions where are supposed to be executed once the initial loading is done or the set time out thing is completed. The trial interval is completed. So, it won't update to it won't update more than 1, I think. It will just stay at 1. I think the first time, it will be 1. Then, yeah. I think we can create a variable and then update that, like, local variable inside the useEffect. Update that variable in the set time out and then later set counter to that variable.

How you would implement the feature in React to handle continuous form validation as user inputs data? So, we have, 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, the focus loses, the input, then we can run a validation checking the values. And if it is not matching with what we, require it to be, If it does not validate, then we can throw, error then and there. Yeah. User refs can be used for this.

Would you use automation to test the app components? Okay. So we have this technique. Not really sure about manual testing techniques. I've just 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? I haven't used Ajax. I mostly prefer Axios. I have used Ajax with basic JavaScript when I used to work with HTML, CSS, and core JavaScript, vanilla JavaScript. So, I'm not sure how 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 work in a similar way. They have a similar idea.