Array Outside Component in React

Array Outside Component in React

Question : why copying array DUMMY_QUOTE , outside the component ? is it because of some specific purpose or we can place array anywhere whether it is outside the component or inside the component it does not matter?

Answer:

This is because we want this array to not get re-created with each render of the component. Hence placing it outside the component prevents that from happening. Normal variables get re-created with each re-render of the component because unlike state they do not persist across re-renders.

import React from 'react'
import { Route, useParams } from 'react-router-dom'
import Comments from '../components/comments/Comments';

const DUMMY_QUOTES = [
    { id: 'q1', author: 'Max', text: 'Learning React is fun!' },
    { id: 'q2', author: 'Maximlian', text: 'Learning React is great!' },
]

function QuoteDetail() {

    const params = useParams();

    return (
        <h1>

            <Route path={`/quotes/${params.quoteId}/comments`}>
                <Comments />
            </Route>
        </h1>
    )
}

export default QuoteDetail