Today, React is one of the most popular web frameworks. More and more companies are either using React or switching to React. Every React project requires expert-level React developers. The React Library is huge and has many concepts. A React expert needs to be familiar with as many React and React-related concepts as possible. Not only should the developer be familiar with all these concepts, he/she should also know how to use them in real-time projects. Expert-level React interviews are not easy. The coding challenges given to the developer generally consist of advanced-level concepts which could only be solved if the developer has the relevant working experience. In this article, we will list the top 3 coding challenges for React experts. Create a Higher-Order Component to reuse component logic Higher-Order Component is an advanced technique used by developers for reusing a component’s logic. Reusing code is an important skill that React experts should have. The major reason to have reusability is code optimization. In this coding challenge, you might be asked to create three different components that have similar component logic. So you have to create a Higher-Order Component that will have the component logic and it will be reused by the other three components. For this challenge, you have three components, each containing a button that increments the value in the state by a specific number. Suppose, three components are: “ComponentA” where the button increments the value by two. “ComponentB” where the button increments the value by twenty. “ComponentC” where the button increments the value by two hundred. First, create a HOC with the logic. { useState } ; HigherOrderComponent = { HOCFun = { [value, setValue] = useState( ); incrementHandler = { setValue(value + incrementValue); }; import from "react" const ( ) => Component, incrementValue const => () const 0 const => () return ; }; return HOCFun; }; export default HigherOrderComponent; < = = /> Component value {value} incrementHandler {incrementHandler} “HigherOrderComponent” takes two arguments - a component and the number by which the state will be incremented. Then, a function is created that has the component logic. The logic contains a state variable whose value is incremented by a handler using the incoming number. This function is returning the incoming component with props - value and incrementHandler. Remember, this is the new component made using the HOC. In the end, this function is returned because it will be used in the existing components. Now, let’s use HOC in “ComponentA”, “ComponentB”, and “ComponentC”. ComponentA: HigherOrderComponent ; ComponentA = { ( <button onClick={incrementHandler}>Increment by 2</button> <h2>{value}</h2> ); }; HigherOrderComponent(ComponentA, ); import from "./HigherOrderComponent" const ( ) => { value, incrementHandler } return < > div </ > div export default 2 ComponentB: HigherOrderComponent ; ComponentB = { ( <button onClick={incrementHandler}>Increment by 29</button> <h2>{value}</h2> ); }; HigherOrderComponent(ComponentB, ); import from "./HigherOrderComponent" const ( ) => { value, incrementHandler } return < > div </ > div export default 20 ComponentC: HigherOrderComponent ; ComponentC = { ( <button onClick={incrementHandler}>Increment by 200</button> <h2>{value}</h2> ); }; HigherOrderComponent(ComponentC, ); import from "./HigherOrderComponent" const ( ) => { value, incrementHandler } return < > div </ > div export default 200 None of these components contain any logic but still, everything’s working. This happens because a Higher-Order Component is being used for code reusability. Now, remember, the motive for this coding challenge is to check how you create the Higher-Order Component and reuse the logic. Implementing and using Redux When the application grows, managing the global state becomes tough. Redux is the most popular third-party library used for state management with React. An expert React developer should understand what Redux is and how it works. So the interview can ask you to implement Redux in a basic React application. In this coding challenge, the interviewer wants to check how you implement and use Redux. So, you might be provided with a basic React application with two components - one that will contain the buttons to increment and decrement the global state and another to display the value. First, create the reducer. reducer = { (action.type) { : { ...state, : action.payload + , }; : { ...state, : action.payload - , }; : { ...state }; } }; export const ( ) => state = { value: }, action 0 switch case "INCREMENT_VALUE" return value 1 case "DECREMENT_VALUE" return value 1 default return Along with type, the reducer will also receive a payload from the action. Then, create action creators. You can also create normal action but creating action creators indicates that you have worked with complex Redux. incrementValueAction = { { : , : value, }; }; decrementValueAction = { { : , : value, }; }; export const ( ) => value return type "INCREMENT_VALUE" payload export const ( ) => value return type "DECREMENT_VALUE" payload Next, create the store. { createStore } ; { reducer } ; initialState = { : , }; store = createStore(reducer, initialState); store; import from "redux" import from "./Reducers/reducers" const value 0 const export default In the end, wrap the application with Provider for the store. { Provider } ; store ; Component1 ; Component2 ; { ( <div className="App"> <Component1 /> <hr /> <Component2 /> </div> ); } App; import from "react-redux" import from "./store" import from "./Components/Component1" import from "./Components/Component2" ( ) function App return < = > Provider store {store} </ > Provider export default The first half is ready. Redux is implemented but the job is not complete because using it in React components is still pending. For that, we will use the react-redux hooks. Remember, do not use the older connect() function. First, install “react-redux”, then use the useDispatch and useSelector react-redux hooks in the components. Component1: { useDispatch, useSelector } ; { decrementValueAction, incrementValueAction, } ; Component1 = { dispatch = useDispatch(); value = useSelector( state.value); .log(value); incrementHandler = { dispatch(incrementValueAction(value)); }; decrementHandler = { dispatch(decrementValueAction(value)); }; ( <button onClick={incrementHandler}>Increment</button> <button onClick={decrementHandler}>Decrement</button> ); }; Component1; import from "react-redux" import from "../ActionCreators/actionCreators" const => () const const ( ) => state console const => () const => () return < > div </ > div export default Component2: { useSelector } ; Component2 = { value = useSelector( state.value); ( <h2>{value}</h2> <hr /> ); }; Component2; import from "react-redux" const => () const ( ) => state return < > div </ > div export default With react-redux hooks in use, buttons will work. Now, the main motive is to check your redux knowledge. The interview may make this challenge tougher by asking you to use redux-thunk in it. Moreover, use the react-redux hooks to give a better impression and avoid older techniques. Share data among components without using props In this coding challenge, the interview might give you a React application with multiple nested components like the following. A | B | -------------- | | C D Component “B” is the child component of “A” while component “C” and “D” are child components of “B”. Suppose there is an object in component “A” and it is required in “C” and “D”. There are two ways to share this object in these nested components without using props. The first is by using Redux. But never use Redux in such cases where the interviewer wants to avoid props because Redux is meant for complex projects. Actually, the interviewer is expecting “Context” for this coding challenge. For this challenge, first, create a context. React ; DemoContext = React.createContext(); DemoContext; import from "react" const export default Then, using this context, wrap the component tree in a Provider. DemoContext ; B ; A = { obj = { : , : , : , }; ( <div> <B /> </div> import from "../DemoContext" import from "./B" const => () const a 1 b 2 c 3 return < = }}> DemoContext.Provider value {{ obj ); }; export default A; </ > DemoContext.Provider Now, we can access the “obj” in components “C” and “D”. There are two ways for consuming the context - by using the Consumer and useContext hook. Prefer using the useContext hook because it is the modern and better way. C: React, { useContext } ; DemoContext ; C = { { obj } = useContext(DemoContext); { a, b, c } = obj; ( <h2>Component C</h2> <h3>{a}</h3> <h3>{b}</h3> <h3>{c}</h3> ); }; C; import from "react" import from "../DemoContext" const => () const const return < > div </ > div export default D: React, { useContext } ; DemoContext ; D = { { obj } = useContext(DemoContext); { a, b, c } = obj; ( <h2>Component D</h2> <h3>{a}</h3> <h3>{b}</h3> <h3>{c}</h3> ); }; D; import from "react" import from "../DemoContext" const => () const const return < > div </ > div export default Let’s check the output. It’s working without using props! Wrapping it up Coding challenges for expert React developers can be tough. The interviewer wants to check your knowledge of React as well as your working experience. So the challenges will have advanced-level concepts such as HOC, Redux, and Context.
