mteb/BrightProStackoverflowRetrieval huggingface dataset:
reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering. 

  * Alternatively, you can render a component with ` useLayoutEffect ` only after hydration. Keep a boolean ` isMounted ` state that’s initialized to ` false ` , and set it to ` true ` inside a ` useEffect ` call. Your rendering logic can then be like ` return isMounted ? <RealContent /> : <FallbackContent /> ` . On the server and during the hydration, the user will see ` FallbackContent ` which should not call ` useLayoutEffect ` . Then React will replace it with ` RealContent ` which runs on the client only and can include ` useLayoutEffect ` calls. 

  * If you synchronize your component with an external data store and rely on ` useLayoutEffect ` for different reasons than measuring layout, consider [ ` useSyncExternalStore ` ](/reference/react/useSyncExternalStore) instead which [ supports server rendering. ](/reference/react/useSyncExternalStore#adding-support-for-server-rendering)

[ Previous  useInsertionEffect  ](/reference/react/useInsertionEffect) [ Next
useMemo  ](/reference/react/useMemo)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` useLayoutEffect(setup, dependencies?) `
  * Usage 
  * Measuring layout before the browser repaints the screen 
  * Troubleshooting 
  * I’m getting an error: “ ` useLayoutEffect ` does nothing on the server”
©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` useDebugValue(value, format?) `
  * Usage 
  * Adding a label to a custom Hook 
  * Deferring formatting of a debug value
[ React Render HTML ](react_render.asp) [ React JSX ](react_jsx.asp) [ React
Components ](react_components.asp) [ React Class ](react_class.asp) [ React
Props ](react_props.asp) [ React Events ](react_events.asp) [ React
Conditionals ](react_conditional_rendering.asp) [ React Lists
](react_lists.asp) [ React Forms ](react_forms.asp) [ React Router
](react_router.asp) [ React Memo ](react_memo.asp) [ React CSS Styling
](react_css_styling.asp) [ React Sass Styling ](react_sass_styling.asp)
s a community. It’s a place where you can ask for help, find
opportunities, and meet new friends. You will meet both developers and
designers, beginners and experts, researchers and artists, teachers and
students. Our backgrounds may be very different, but React lets us all create
user interfaces together.

##  Welcome to the  
React community

[ Get Started ](/learn)

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />        <div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
by Strict Mode

React warns if some component anywhere inside a ` <StrictMode> ` tree uses one
of these deprecated APIs:

  * [ ` findDOMNode ` ](/reference/react-dom/findDOMNode) . [ See alternatives. ](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
  * ` UNSAFE_ ` class lifecycle methods like [ ` UNSAFE_componentWillMount ` ](/reference/react/Component#unsafe_componentwillmount) . [ See alternatives. ](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles)
  * Legacy context ( [ ` childContextTypes ` ](/reference/react/Component#static-childcontexttypes) , [ ` contextTypes ` ](/reference/react/Component#static-contexttypes) , and [ ` getChildContext ` ](/reference/react/Component#getchildcontext) ). [ See alternatives. ](/reference/react/createContext)
  * Legacy string refs ( [ ` this.refs ` ](/reference/react/Component#refs) ). [ See alternatives. ](https://reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage)

These APIs are primarily used in older [ class components
](/reference/react/Component) so they rarely appear in modern apps.

[ Previous  <Profiler> ](/reference/react/Profiler) [ Next  <Suspense>
](/reference/react/Suspense)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` <StrictMode> `
  * Usage 
  * Enabling Strict Mode for entire app 
  * Enabling Strict Mode for a part of the app 
  * Fixing bugs found by double rendering in development 
  * Fixing bugs found by re-running Effects in development 
  * Fixing deprecation warnings enabled by Strict Mode
* [ Accessibility ](/docs/accessibility.html)
* [ Code-Splitting ](/docs/code-splitting.html)
* [ Context ](/docs/context.html)
* [ Error Boundaries ](/docs/error-boundaries.html)
* [ Forwarding Refs ](/docs/forwarding-refs.html)
* [ Fragments ](/docs/fragments.html)
* [ Higher-Order Components ](/docs/higher-order-components.html)
* [ Integrating with Other Libraries ](/docs/integrating-with-other-libraries.html)
* [ JSX In Depth ](/docs/jsx-in-depth.html)
* [ Optimizing Performance ](/docs/optimizing-performance.html)
* [ Portals ](/docs/portals.html)
* [ Profiler ](/docs/profiler.html)
* [ React Without ES6 ](/docs/react-without-es6.html)
* [ React Without JSX ](/docs/react-without-jsx.html)
* [ Reconciliation ](/docs/reconciliation.html)
* [ Refs and the DOM ](/docs/refs-and-the-dom.html)
* [ Render Props ](/docs/render-props.html)
* [ Static Type Checking ](/docs/static-type-checking.html)
* [ Strict Mode ](/docs/strict-mode.html)
* [ Typechecking With PropTypes ](/docs/typechecking-with-proptypes.html)
* [ Uncontrolled Components ](/docs/uncontrolled-components.html)
* [ Web Components ](/docs/web-components.html)
(/reference/react/useDeferredValue) .

If your router is integrated with Suspense, it should wrap its updates into [
` startTransition ` ](/reference/react/startTransition) automatically.

[ Previous  <StrictMode> ](/reference/react/StrictMode) [ Next  APIs
](/reference/react/apis)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` <Suspense> `
  * Usage 
  * Displaying a fallback while content is loading 
  * Revealing content together at once 
  * Revealing nested content as it loads 
  * Showing stale content while fresh content is loading 
  * Preventing already revealed content from hiding 
  * Indicating that a Transition is happening 
  * Resetting Suspense boundaries on navigation 
  * Providing a fallback for server errors and client-only content 
  * Troubleshooting 
  * How do I prevent the UI from being replaced by a fallback during an update?
you can use in your JSX.

* * *

##  Built-in components

  * [ ` <Fragment> ` ](/reference/react/Fragment) , alternatively written as ` <>...</> ` , lets you group multiple JSX nodes together. 
  * [ ` <Profiler> ` ](/reference/react/Profiler) lets you measure rendering performance of a React tree programmatically. 
  * [ ` <Suspense> ` ](/reference/react/Suspense) lets you display a fallback while the child components are loading. 
  * [ ` <StrictMode> ` ](/reference/react/StrictMode) enables extra development-only checks that help you find bugs early. 

* * *

##  Your own components

You can also [ define your own components ](/learn/your-first-component) as
JavaScript functions.

[ Previous  useTransition  ](/reference/react/useTransition) [ Next
<Fragment> (<>)  ](/reference/react/Fragment)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Built-in components 
  * Your own components
milar functionality as a
browser extension.

* * *

###  Measuring different parts of the application

You can use multiple ` <Profiler> ` components to measure different parts of
your application:

    
    
    <App>  
    
    
      <Profiler id="Sidebar" onRender={onRender}>  
    
    
        <Sidebar />  
    
    
      </Profiler>  
    
    
      <Profiler id="Content" onRender={onRender}>  
    
    
        <Content />  
    
    
      </Profiler>  
    
    
    </App>

You can also nest ` <Profiler> ` components:

    
    
    <App>  
    
    
      <Profiler id="Sidebar" onRender={onRender}>  
    
    
        <Sidebar />  
    
    
      </Profiler>  
    
    
      <Profiler id="Content" onRender={onRender}>  
    
    
        <Content>  
    
    
          <Profiler id="Editor" onRender={onRender}>  
    
    
            <Editor />  
    
    
          </Profiler>  
    
    
          <Preview />  
    
    
        </Content>  
    
    
      </Profiler>  
    
    
    </App>

Although ` <Profiler> ` is a lightweight component, it should be used only
when necessary. Each use adds some CPU and memory overhead to an application.

* * *

[ Previous  <Fragment> (<>)  ](/reference/react/Fragment) [ Next  <StrictMode>
](/reference/react/StrictMode)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` <Profiler> `
  * ` onRender ` callback 
  * Usage 
  * Measuring rendering performance programmatically 
  * Measuring different parts of the application
rmData.get("message"));
        formRef.current.reset();
        await sendMessage(formData);
      }
      const [optimisticMessages, addOptimisticMessage] = useOptimistic(
        messages,
        (state, newMessage) => [
          ...state,
          {
            text: newMessage,
            sending: true
          }
        ]
      );
    
      return (
        <>
          {optimisticMessages.map((message, index) => (
            <div key={index}>
              {message.text}
              {!!message.sending && <small> (Sending...)</small>}
            </div>
          ))}
          <form action={formAction} ref={formRef}>
            <input type="text" name="message" placeholder="Hello!" />
            <button type="submit">Send</button>
          </form>
        </>
      );
    }
    
    export default function App() {
      const [messages, setMessages] = useState([
        { text: "Hello there!", sending: false, key: 1 }
      ]);
      async function sendMessage(formData) {
        const sentMessage = await deliverMessage(formData.get("message"));
        setMessages((messages) => [...messages, { text: sentMessage }]);
      }
      return <Thread messages={messages} sendMessage={sendMessage} />;
    }
    
    

Show more

[ Previous  useMemo  ](/reference/react/useMemo) [ Next  useReducer
](/reference/react/useReducer)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` useOptimistic(state, updateFn) `
  * Usage 
  * Optimistically updating forms
* [ Start a New React Project  ](/learn/start-a-new-react-project "Start a New React Project")
* [ Add React to an Existing Project  ](/learn/add-react-to-an-existing-project "Add React to an Existing Project")
* [ Editor Setup  ](/learn/editor-setup "Editor Setup")
* [ Using TypeScript  ](/learn/typescript "Using TypeScript")
* [ React Developer Tools  ](/learn/react-developer-tools "React Developer Tools")
* [ AJAX and APIs ](/docs/faq-ajax.html)
* [ Babel, JSX, and Build Steps ](/docs/faq-build.html)
* [ Passing Functions to Components ](/docs/faq-functions.html)
* [ Component State ](/docs/faq-state.html)
* [ Styling and CSS ](/docs/faq-styling.html)
* [ File Structure ](/docs/faq-structure.html)
* [ Versioning Policy ](/docs/faq-versioning.html)
* [ Virtual DOM and Internals ](/docs/faq-internals.html)
* [ Referencing Values with Refs  ](/learn/referencing-values-with-refs "Referencing Values with Refs")
* [ Manipulating the DOM with Refs  ](/learn/manipulating-the-dom-with-refs "Manipulating the DOM with Refs")
* [ Synchronizing with Effects  ](/learn/synchronizing-with-effects "Synchronizing with Effects")
* [ You Might Not Need an Effect  ](/learn/you-might-not-need-an-effect "You Might Not Need an Effect")
* [ Lifecycle of Reactive Effects  ](/learn/lifecycle-of-reactive-effects "Lifecycle of Reactive Effects")
* [ Separating Events from Effects  ](/learn/separating-events-from-effects "Separating Events from Effects")
* [ Removing Effect Dependencies  ](/learn/removing-effect-dependencies "Removing Effect Dependencies")
* [ Reusing Logic with Custom Hooks  ](/learn/reusing-logic-with-custom-hooks "Reusing Logic with Custom Hooks")
{% load static %}
{% load mathfilters %}
{% with count=0 %}
{% for i in modam %}
{% if i.List.id == list.id %}
{{ count|add:1 }}
{% endif%}
{% endfor %}
<div class = "commentscarrier">
<div class="comment-contentsas comment-head"><p>Comments({{count}})</p></div>
<hr>
{% endwith %}
[ Blog ](/blog/) [ Phoenix Files ](/phoenix-files/) [ Laravel Bytes
](/laravel-bytes/) [ Ruby Dispatch ](/ruby-dispatch/) [ Django Beats
](/django-beats/) [ JavaScript Journal ](/javascript-journal/) [ Docs
](/docs/) [ Community  (opens an external site)  ](https://community.fly.io) [
Status  (opens an external site)  ](https://status.flyio.net) [ Pricing
](/docs/about/pricing/) [ Sign In ](https://fly.io/app/sign-in) [ Get Started
](/docs/hands-on/start/) [ RSS Feed  ](/django-beats/feed.xml)
###  ` ifchanged  ` ¶

Check if a value has changed from the last iteration of a loop.

The ` {%  ifchanged  %}  ` block tag is used within a loop. It has two
possible uses.

  1. Checks its own rendered contents against its previous state and only displays the content if it has changed. For example, this displays a list of days, only displaying the month if it changes: 
    
        <h1>Archive for {{ year }}</h1>
    
    {% for date in days %}
        {% ifchanged %}<h3>{{ date|date:"F" }}</h3>{% endifchanged %}
        <a href="{{ date|date:"M/d"|lower }}/">{{ date|date:"j" }}</a>
    {% endfor %}
    

  2. If given one or more variables, check whether any variable has changed. For example, the following shows the date every time it changes, while showing the hour if either the hour or the date has changed: 
    
        {% for date in days %}
        {% ifchanged date.date %} {{ date.date }} {% endifchanged %}
        {% ifchanged date.hour date.date %}
            {{ date.hour }}
        {% endifchanged %}
    {% endfor %}
    

The ` ifchanged  ` tag can also take an optional ` {%  else  %}  ` clause that
will be displayed if the value has not changed:

    
    
    {% for match in matches %}
        <div style="background-color:
            {% ifchanged match.ballot_id %}
                {% cycle "red" "blue" %}
            {% else %}
                gray
            {% endifchanged %}
        ">{{ match }}</div>
    {% endfor %}
###  ` comment  ` ¶

Ignores everything between ` {%  comment  %}  ` and ` {%  endcomment  %}  ` .
An optional note may be inserted in the first tag. For example, this is useful
when commenting out code for documenting why the code was disabled.

Sample usage:

    
    
    <p>Rendered text with {{ pub_date|date:"c" }}</p>
    {% comment "Optional note" %}
        <p>Commented out text with {{ create_date|date:"c" }}</p>
    {% endcomment %}
    

` comment  ` tags cannot be nested.