3 React Mistakes, 1 App Killer
Why Stack Overflow recommends it
Stack Overflow users link it when explaining why you should render components as <Component /> rather than calling them as functions, and why nesting component definitions causes remounts and lost input focus.
Recommended by 3 people across 3 different months, 2023 to 2024.
What it is
Jack Herrington walks through three common React mistakes that can break an app: calling component functions directly instead of rendering them as elements, defining components inside other components, and invoking component functions locally. He shows how JSX compiles to createElement to explain why these cause bugs.
What people said
Recommends GeorgeFkd · 2023-01 · Stack Overflow · on “Why isn't my child component updating data when changing the state in React?”
First of all something you should avoid is the renderComponent() call.Check here the first mistake mentioned in this video [this video] . This will most likely fix your problem but even if it doesn't the video explains why it should not be used. Something else that caught my eye(possibly unrelated to your question but good to know) is the onChange function. When two pieces of state change together it is a potential source of problems, check out this article on when to use the useReducer hook [LINK] . Also be careful with naming React Components, they need to be capital case, this question contains appropriate answers explaining it [LINK] . (To only solve your problem stick to no.1 of this list, t
Recommends Dave · 2023-02 · Stack Overflow · on “Does it consider bad if a react component without any state is defined and rendered inside another react component?”
It's perfectly OK to have react components that contain other react components. The contained components will only re-render if they rely on state that has changed, and even if they do re-render - that just updates he virtual dom which isn't free but is pretty light weight. Each component can have its own state. That is OK and how things work. What you cannot do is introduce "conditional state" into a component. i.e. all your useXXXXX code should be at the top of your component and not inside a function you call or within an if statement, etc. You absolutely want to use components, e.g. <Header /> and not {Header() ). I recommend watching this video [this video] to learn about the differences bet
Recommends Iorweth333 · 2024-06 · Stack Overflow · on “I define a subcomponent with an input box in another component. Why does the subcomponent lose focus when inputting?”
What you did is a declaration of a component within a component: const Input = () => (<input value={text} onChange={handleChange} />) Jack Herrington talks about it in his video "3 React Mistakes, 1 App Killer" [this video] More in depth explanation: the reason is the mechanism of reconciliation [LINK] . React compares current shape of Virtual DOM to previous shape. Among other things, the identity of each element is compared, i. e. the reference to the function which creates the element. You create a new reference to Input on each render of App and this is why Input is dismounted and remounted on each text change. I don't understand why you did that, just do this: function App () { const [text,