React interview React is one of the most popular front-end web frameworks. It is used to build interactive and dynamic web components. React comes with many benefits. It uses virtual DOM, JSX, and it is comparatively easier to learn and use. React interviews can be challenging. There are several concepts in React. Most React interviews have coding challenges. These coding challenges depend on the experience of the developer. For a beginner, the coding challenges are focused on the way the developer uses the state or writes the JSX. For a mid-level experienced React developer, the coding challenges are aimed to check the working experience of the individual. The developer is expected to understand the challenge in the minimum time possible and solve it in an organized way. In this article, we will list the top 3 React coding challenges for a mid-level experienced developer. Create a Counter but with a twist Creating a basic counter with a button that increments the displayed value by 1 is a simple task. But with some added conditions, the same task can become tough. Suppose, we have a component, which contains a state variable (declared using the useState React hook) that tracks the value for the counter. The value is also displayed in this component, but the button that increments the value is present in the child component of this component. First, the interviewer expects you to find the possible ways to solve this problem. It can be solved using one of the following ways. Using global state created with Redux Using render props. Using React context The redux way is too complex for such a challenge. But mentioning the global state in front of the interviewer shows your awareness. Using render props is the easier way but only an experienced developer will be aware of the “render props” technique. The function to update the “count” is passed as props to the child component and then, it is used there. But, the third way is the best and it will impress the interviewer the most because it uses Context. Context is one of the best features of React and every experienced React developer is expected to know React Context. First, the context is created. React ; CountContext = React.createContext(); CountContext; import from "react" const export default Then, a provider is used in the parent component. React, { useState } ; Child ; CountContext ; App = { [count, setCount] = useState( ); countHandler = { setCount(count + ); }; ( <Child /> <h2>{count}</h2> import from "react" import from "./Child" import from "./context" const => () const 0 const => () 1 return < = , }}> CountContext.Provider value {{ count countHandler ); }; export default App; </ > CountContext.Provider Finally, the useContext hook is used to access the function in the child component. React, { useContext } ; CountContext ; Child = { context = useContext(CountContext); { countHandler } = context; ( <button onClick={countHandler}>Increment</button> ); }; Child; import from "react" import from "./context" const => () const const return < > div </ > div export default Context consumer can also be used in the child component but instead, use the useContext hook. This is because the hooks are preferred over the older ways. Add and Delete Items From the List This challenge is perhaps the most commonly asked React coding challenge for mid-level React developers. In this challenge, the developer has to create an input field with a button. When the button is clicked, the text in the input field should be added below in a list. Moreover, whenever any list item is clicked, it should be removed from the list. The motive of this challenge is to check how good the developer is with forms, state, and lists. First, create the functionality to add the text written in the input field to the list. ; React, { useState } ; App = { [list, setList] = useState([]); [value, setValue] = useState( ); changeHandler = { setValue(e.target.value); }; submitHandler = { setList([...list, value]); setValue( ); }; ( <input type="text" value={value} onChange={changeHandler} />{" "} <button onClick={submitHandler}>Add</button> <hr /> <ul> {list.length > 0 && list.map((item) => { return <li>{item}</li>; })} </ul> </div> import "./App.css" import from "react" const => () const const "" const ( ) => e const => () "" return < = > div className "App" ); }; export default App; Try to use the state properly and make use of ES6 syntax like arrow functions and spread operator. Next, create the functionality to remove the item from the list when it is clicked. This can be tricky but not if you have the experience. ; React, { useState } ; App = { [list, setList] = useState([]); [value, setValue] = useState( ); changeHandler = { setValue(e.target.value); }; submitHandler = { setList([...list, value]); setValue( ); }; deleteHandler = { setList(list.filter( ele != item)); }; ( <input type="text" value={value} onChange={changeHandler} />{" "} <button onClick={submitHandler}>Add</button> <hr /> <ul> {list.length > 0 && list.map((item) => { return <li onClick={() => deleteHandler(item)}>{item}</li>; })} </ul> </div> import "./App.css" import from "react" const => () const const "" const ( ) => e const => () "" const ( ) => item ( ) => ele return < = > div className "App" ); }; export default App; So here, a function is added, which is invoked when a list item is clicked. deleteHandler = { setList(list.filter( ele != item)); }; const ( ) => item ( ) => ele Again, using the filter function indicates that you have experience working in React. Displaying Data Coming From an API If you are a mid-level experienced React developer, you must have enough working experience for handling APIs. In this coding challenge, you will be provided with an API that will return some data, maybe, an array of objects. You have to display the data in the UI. The main motive here is to check how and where the API is called by the developer. In React, there are two ways to call APIs. Axios fetch API While fetch API is inbuilt, Axios is installed through NPM and is considered a better option. So first, install Axios using npm and then use the following API to fetch the data. https: React, { useState, useEffect } ; axios ; App = { [data, setData] = useState([]); fetchData = () => { { data } = axios.get( ); setData(data); }; useEffect( { fetchData(); }, []); ( <ui> {data.map((item) => { return ( <> <li>Id: {item.id}</li> <li>Name: {item.name}</li> <li>Email: {item.email}</li> <hr /> </> ); })} </ui> ); }; App; //jsonplaceholder.typicode.com/posts/1/comments import from "react" import from "axios" const => () const const async const await "https://jsonplaceholder.typicode.com/posts/1/comments" => () return < > div </ > div export default As mentioned earlier, the interviewers want to see how you call the API. Here, Axios is used. Also, to handle the asynchronous request, ES6 async/await syntax is used. You can also use promises. Another important part is where you call the API. Here, the API call is made in the useEffect hook with an empty dependency array, meaning, the data will be available when the component is mounted. Wrapping it up There is a huge difference between a beginner and a mid-level React developer. A beginner is expected to know React and its concepts while an experienced React developer should know how to use these concepts efficiently. All three coding challenges aim to gauge the experience level of a React developer.
