Confused why react component not rendering from data

Active3 hr before
Viewed126 times

8 Answers


I am trying to figure out why certain markup from my react component is not rendering. No errors are being thrown.,Connect and share knowledge within a single location that is structured and easy to search.,Thanks for contributing an answer to Stack Overflow!

 Pretag team - issue, fix, solve, resolve

13. Confusing <tag/> with </tag>,If you try to render <greeting />, React will ignore the above and you will get a warning:,Note how the "My Awesome Button" was not rendered above and React just rendered an empty HTML button element. React will not warn you in this case.

class greeting extends React.Component {
   // ...
load more v

The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty <div />.,While it is generally recommended to use unidirectional data flow such as React state, Flux, or Redux, React components can use a model layer from other frameworks and libraries.,To prevent React from touching the DOM after mounting, we will return an empty <div /> from the render() method. The <div /> element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM:

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);    this.$el.somePlugin();  }

  componentWillUnmount() {
    this.$el.somePlugin('destroy');  }

  render() {
    return <div ref={el => this.el = el} />;  }
load more v

Measuring React Component Rendering Performance,Immutability and Rerendering,What is "Rendering"? Rendering Process Overview Render and Commit Phases

 Pretag team - issue, fix, solve, resolve

The first React element is the one we start with in the ReactDOM.render call:,Okay, a better interview question might be: When you use something like <MyComponent /> in JSX, is that a component, an element, or an instance?,What you need to understand here is that a React element is different from a DOM element. A React element is just a description of an HTML element, a React component, or a mix of these.

Every React App starts with a render call that uses a React element. Let’s use the HelloMessage example from slightly modified to have a function component as well:

const Today = () => (  <div>Today is {new Date().toDateString()}</div>);
load more v

Uncontrolled components avoid preserving data in state but instead, preserve data in what React calls refs. The following example uses ref to handle forms:,We forget to account for nested components.,State preserves data during changes and UI updates. Sometimes the UI updates might not just be worth it. Keystrokes are not enough reason for as atomic as an input element to update, let alone a component. This is why some people opt for uncontrolled components in React.

function App() {
  const [value, setValue] = React.useState("");
  const handleInputChange = e => {
  return (
    <div className="App">
      <Input value={value} onChange={handleInputChange} />
load more v

React Hooks need to be called in the same order each time the component renders. Overreacted beautifully articulates several reasons why this is the case.,There are several well-documented problems with class-based lifecycle events. One of the biggest complaints is that you often have to repeat logic in componentDidMount and componentDidUpdate.,React will be eventually ruined by its hooks. You can see that the fundamental concept of React is to organize the HTML components into classes / objects.

 Pretag team - issue, fix, solve, resolve

You might run into React.useMemo() and think that it’s the same as React.memo(). In a way, yes but no.,React.useMemo() is more generic, and optimizes a value.,Don’t confuse it with React.useMemo()!

load more v

Other "component-react" queries related to "Confused why react component not rendering from data"