const is a signal that the variable won’t be reassigned.

let is a signal that the variable may be reassigned

Additional things to ponder:

• Use const by default
• Use let only if rebinding is needed

• const does not indicate that a value is ‘constant’ or immutable.

  const foo = {};
  foo.bar = 10;
  console.log(foo.bar); // --> 10
  

  Only the binding is immutable. ie using an assignment operator or a unary or postfix -- or ++ operator on a const variable throws a TypeError exception

• ES6 const and let are hoisted too. Although the identifiers has the same memory reference from compile time, they cannot be accessed before declaration in the code. (but not as we thought the declaration would be physically moved to the top in the scope) ;)

You don't need to use anything but plain React and ES6 to achieve what you want. As per Jim's answer, just define the constant in the right place. I like the idea of keeping the constant local to the component if not needed externally. The below is an example of possible usage.

import React from "react";

const sizeToLetterMap = {
  small_square: 's',
  large_square: 'q',
  thumbnail: 't',
  small_240: 'm',
  small_320: 'n',
  medium_640: 'z',
  medium_800: 'c',
  large_1024: 'b',
  large_1600: 'h',
  large_2048: 'k',
  original: 'o'
};

class PhotoComponent extends React.Component {
  constructor(args) {
    super(args);
  }

  photoUrl(image, size_text) {
    return (<span>
      Image: {image}, Size Letter: {sizeToLetterMap[size_text]}
    </span>);
  }

  render() {
    return (
      <div className="photo-wrapper">
        The url is: {this.photoUrl(this.props.image, this.props.size_text)}
      </div>
    )
  }
}

export default PhotoComponent;

// Call this with <PhotoComponent image="abc.png" size_text="thumbnail" />
// Of course the component must first be imported where used, example:
// import PhotoComponent from "./photo_component.jsx";

Using let or const is perfectly fine. Sometimes you need to declare variables that are derived from props or states, in order to make the code declarative and readable.

Regarding your performance doubt, you can always use useMemo hook to memoize the derived value and avoid calculating it on each render. But this should be avoided as long as your code is not expensive computationally.

export default function MyComponent(props) {

  const otherCondition = props.content.length > 20;

  const myVariable = useMemo(() => {
    let myVariable = 0;
    if (props.isDisabled && otherCondition) {
      // ...more complex checks...
      myVariable = 1;
    } else {
      myVariable = 2;  
    }
    return myVariable
  }, 
  [props.isDisabled, otherCondition])

  return (
    <>
     {/* some JSX */}
    </>
  );

}

When you want to define some constant values like style or image URLs then it's always better to define that outside of component. It will become global values and available inside each function/class of that file.

Another option of defining constants is on a class instance itself, but then that variable will be available only inside the class. It means if you defined two classes inside the same file, then one class variable would not be available inside another class.

Like this:

class ABC extends React.Component{
   constructor(){
      super();
      this.a = 10;
      this.b = 20;
   }

   render(){
      console.log(this.a, this.b);
      return (....);
   }
}

Note: React classes don't have the feature of class level properties; we can only define methods. But if you want to define values then you need to use class transform properties.

There's no way to directly access the variable itself--it doesn't exist outside the function. But there are countless ways to share data between unrelated functions.

In React Components:

In React when you encounter a situation in which multiple components need access to the same state it's usually a sign that you should lift the state up.

So in your example (assuming these are React components) you could do something like this:

// component takes a 'value' prop without caring where it comes from
function ChildA ({ value }) {
  return (
    <div>Child A says {value}</div>
  )
}

// same as above
function ChildB ({ value }) {
  return (
    <div>Child B also says {value}</div>
  )
}

// controls the state and passes it down as a prop
function Parent () {
  const [hello, setHello] = useState('hello');
  return (
    <div>
      <ChildA value={hello} />
      <ChildB value={hello} />
    </div>
  )
}

In javascript more generally

You can follow the same principle, moving shared data up, in javascript generally (non-react):

let hello = 'hello';

function a() {
  console.log(hello);
}

function b() {
  console.log(hello);
}

a(); // logs 'hello'
b(); // logs 'hello'

hello = 'howdy';

a(); // logs 'howdy'
b(); // logs 'howdy'

Using a store with imports/exports

A common pattern for this sort of thing is to use a dedicated "store" class as the source of truth.

I've commented out the imports and exports in the snippet below because they don't make sense in a snippet (and more importantly, they don't work in a snippet).

// HelloStore.js

class HelloStore {
  // keep track of the value internally
  _hello = 'hello';

  // setter
  set hello(newValue) {
    this._hello = newValue;
  }

  // getter
  get hello() {
    return this._hello;
  }
}

const store = new HelloStore();
// export default store;


// Foo.js
// import store from './HelloStore';

function foo () {
  console.log(store.hello);
}


// Bar.js
// import store from './HelloStore';

function bar () {
  console.log(store.hello);
}

foo(); // logs 'hello'
bar(); // logs 'hello'

store.hello = 'howdy'

foo(); // logs 'howdy'
bar(); // logs 'howdy'

Getting change notifications from the store

It's often desirable for components or other code to be alerted to changes to the store value. You can facilitate this by making the store an event emitter.

// This is just a dumber implementation of node's
// event emitter because i can't import it here.
// No reason you'd need to roll your own emitter
// in a real project.
class EventEmitter {
  listeners = [];
  addEventListener (handler) {
    this.listeners.push(handler);
  }
  emit (data) {
    this.listeners.forEach(handler => handler(data));
  }
}

// HelloStore.js

class HelloStore extends EventEmitter {
  // keep track of the value internally
  _hello = 'hello';

  // setter
  set hello(newValue) {
    this._hello = newValue;
    this.emit(newValue); // alert the listeners to the update
  }

  // getter
  get hello() {
    return this._hello;
  }
}

const store = new HelloStore();
// export default store;


// Foo.js
// import store from './HelloStore';

function foo(value) {
  console.log(`foo says ${value}`);
}

function bar(value) {
  console.log(`bar says ${value}`);
}

// register listeners to invoke foo
// and bar when the store value changes
store.addEventListener(foo);
store.addEventListener(bar);

// emits event, triggers listeners
store.hello = 'howdy';

// emits event, triggers listeners
store.hello = 'bonjour';

setState is definitely the right thing to do. That is the React hooks way of having data that, when it changes, causes a re-render.

I have tried const [priceMap, setpriceMap] = useState([]); but it only sets single value to priceMap.

Why are you setting priceMap to an Array when you want it to be an Object? Try something like this:

const CreateNewTab = () => {
  const [priceMap, setPriceMap] = useState({});
  return (
    <Form>
      <Form.Item
        label="Price Map"
        name="priceMap"
        rules={[{ required: true, message: "Please input Prices!"}]}
      >
        {selectedProducts.flatMap(productId => products
          .filter(product => product.id === productId)
          .map(product => (
            <Input.Group compact>
              <Form.Item label={product.productName + " : "} />   
              {product.priceList.map((priceObj) => (
                <Form.Item
                  label={priceObj.type}
                  key={priceObj.priceId}
                >
                  <Input
                    defaultValue={priceObj.price}
                    rules={[{ required: true, message: "Please input price!" }]}
                    onChange={(changedValues) => {
                      setPriceMap({
                        ...priceMap,
                        [priceObj.id]: changedValues[Object.keys(changedValues)[0]]
                      })
                    }} />
                </Form.Item>
              ))}
            </Input.Group>
          ))
        )}
      </Form.Item>
    </Form>
  );
};

Notice that when you call setPriceMap you pass a new object rather than mutating the object.